使用JavaScript在页面上实现一个简易的计算器,代码如下:
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算</title>
</head>
<style>
input{ border: rgb(9, 128, 128) 1px solid;}
select { /*隐藏下拉三角*/
-webkit-appearance: none;
appearance: none;
}
div{
margin: auto; width:38%;
border: 2px solid green; padding: 5px;
}
</style>
<body>
<div>
<!--下面是只允许输入数字的输入框-->
<input type="text" id="first" oninput="value=value.replace(/[^\d]/g,'')">
<select name="yunsuanfu" id="select">
<option value="">请选择</option>
<option value="+"> +</option>
<option value="-"> -</option>
<option value="x"> x</option>
<option value="/"> /</option>
</select>
<!--下面是只允许输入数字的输入框-->
<input type="text" id="second"oninput="value=value.replace(/[^\d]/g,'')">
<select name="" id="deng">
<option value="=">=</option>
</select>
<!--下面是不允许输入input,在这里仅做显示结果使用-->
<input type="text" id="fruit" disabled="disabled">
</div>
<div style="text-align: center;">
<input type="button" value="计算" onclick="jisuan()" style="font-size: 15px;">
</div>
<script src="1.js"></script>
</body>
</html>
JavaScript的函数代码:
function jisuan() {
var a = document.getElementById("first").value;
var b = document.getElementById("second").value;
var c = document.getElementById("select").value;
a = parseFloat(a);
b = parseFloat(b);
switch(c){
case "+":
document.getElementById("fruit").value=parseInt(a)+parseInt(b);
break;
case "-":
document.getElementById("fruit").value=parseInt(a)-parseInt(b);
break;
case "x":
document.getElementById("fruit").value=parseInt(a)*parseInt(b);
break;
case "/":
document.getElementById("fruit").value=parseInt(a)/parseInt(b);
break;
}
document.getElementById('fruit').Value=num;
}
可以正常的做四则运算,效果显示: