abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> <style> *{padding: 0px;margin: 0px;} div{margin: 10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
*{padding: 0px;margin: 0px;}
div{margin: 10px;}
input{width: 150px;height: 30px;border: 1px solid #ccc;text-align: center;}
select{
width: 38px;height: 30px;border: 1px solid #ccc;
}
button{
width: 80px;height: 32px;border: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<input type="number" name="one">
<select name="fuhao">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<input type="number" name="two">
=
<input type="text" name="three">
<button onclick="jisuan()">计算</button>
</div>
</body>
<script type="text/javascript">
function jisuan(){
var one_list = document.getElementsByName('one');
var two_list = document.getElementsByName('two');
var fuhao_list = document.getElementsByName('fuhao');
var three_list = document.getElementsByName('three');
var one_value = parseFloat(one_list[0].value);
var two_value = parseFloat(two_list[0].value);
var fuhao_value = fuhao_list[0].value;
//获取运算符
switch(fuhao_value){
case '+':
three_list[0].value = one_value + two_value;
break;
case '-':
three_list[0].value = one_value - two_value;
break;
case '*':
three_list[0].value = one_value * two_value;
break;
case '/':
three_list[0].value = one_value / two_value;
break;
case '%':
three_list[0].value = one_value % two_value;
break;
}
// alert(one_value);
console.log(fuhao_value);
}
</script>
</html>执行代码如下：
Correcting teacher：天蓬老师Correction time：2019-02-20 10:20:14
Teacher's summary：parseFloat(one_list[0].value);这行代码是关键, 将字符型的数字转换成数值型, 才能进行计算, 不要用自动转换