<!DOCTYPE html>
<html>
<head>
<title> 简易计算器</title>
<script type="text/javascript">
function count() {
var x1 = document.getElementById("txt1").value;
//获取第一个输入框的值
var x2 = document.getElementById("txt2").value;
//获取第二个输入框的值
var op = document.getElementById("select").value;
//获取选择框的值
var x3;
switch (op) {
case '+':
x3 = parseFloat(x1) + parseFloat(x2);
break;
case '-':
x3 = parseFloat(x1) - parseFloat(x2);
break;
case '*':
x3 = parseFloat(x1) * parseFloat(x2);
break;
default:
x3 = parseFloat(x1) / parseFloat(x2);
break;
}
//获取通过下拉框来选择的值来改变加减乘除的运算法则
document.getElementById("fruit").value = x3;
//设置结果输入框的值
}
</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>
有关 parseFloat() 或 parseInt() 函数的作用:
函数将字符串转换为浮点型 或 整型数字
比如你在输入框里输入5,
document.getElementById(“txt1”).value
这句返回的值是字符串的“5”,而不是数字的5,要通过parseInt()来解析为数字。
垃圾经验概括:
-
var x1=document.getElementById(“txt1”).value;
这个语句刚开始写成:
var x1=document.getElementById(“x1”).value;
自己设置了一个id,但是题目后面< input type=‘text’ id=‘txt1’ /> 这里文本输入框的id已经给出了"txt1",要注意前后id一致的问题。 -
写这个计算器的时候一般代码是没有问题,最后是把getElementById的I写成了l,这两个字母长得太像啦然后dw也没有报错,之后发觉不了语法错误时要注意字母的拼写是否出错,尤其注意上述字母!!(╯‵□′)╯︵┻━┻