简易计算器
实现效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
</head>
<body>
<input id="txt1" type="text">
<select id="txt2" name="" id="">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input id="txt3" type="text">
<input id="btn" type="button" value="=">
<input id="txt4" type="text">
<script>
var txt1=document.getElementById("txt1");
var txt2=document.getElementById("txt2");
var txt3=document.getElementById("txt3");
var txt4=document.getElementById("txt4");
var btn=document.getElementById("btn");
var result=0;// 定义一个变量存放计算器算出的值
// 点击等号按钮时,算出我们需要的值输出
btn.onclick=function(){
var a=parseFloat(txt1.value);
var b=parseFloat(txt3.value);
// 在input里面输入的内容是写在value里面的,parseFloat——小数依然适用
var c=txt2.value;// txt2.value指的是+、-、*、/
// 利用switch语句完成,当我们选择加减乘除里面其中一个时,符号两边的input里的value值是进行此运算
switch(c){
case "+":result=a+b;
break;
case "-":result=a-b;
break;
case "*":result=a*b;
break;
case "/":result=a/b;
break;
}
// 将算出来的值赋到等号后面的input的里面输出
txt4.value=result;
}
</script>
</body>
</html>