js编写一个简单的计算器
学习js遇到的一个问题
描述:获取两个输入框中的数字,以及运算符号,点击“=”,得最终的计算值。形式如下。
思路:定义变量分别获取两个运算文本框的值,通过判断获取的运算符号,将两个数的运算结果写入最后一个文本框。
<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
var r;
//获取第一个输入框的值
var x1 = parseFloat(document.getElementById('txt1').value);
//获取第二个输入框的值
var x2 = parseFloat(document.getElementById('txt2').value);
//获取选择框的值
var y = document.getElementById('select').value;
//获取通过下拉框来选择的值来改变加减乘除的运算法则
switch(y){
case '+':
r = x1 + x2;
break;
case '-':
r = x1 - x2;
break;
case '*':
r = x1 * x2;
break;
case '/':
r = x1 / x2;
break;
}
//设置结果输入框的值
document.getElementById('fruit').value =r.toFixed(2);
}
</script>
</head>
<body>
<input type='text' id='txt1'/>
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2'/>
<!--通过 = 按钮来调用创建的函数,得到结果-->
<input type='button' value='=' onclick = "count()" />
<input type='text' id='fruit'/>
</body>
</html>
结果如下:
需要说明的是通过document.getElementById(‘id名称’).value获得的元素默认为string类型,所以需要通过parseFlaot()函数解析获得的字符串类型,并返回一个浮点数。toFixed(2)可以控制结果的精度,这里我们定义为以两位小数显示结果。