2021-06-08
Posted 奶油莓果酱
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2021-06-08相关的知识，希望对你有一定的参考价值。
使用JS完成简易计算器
要求：输入的值只能是数字，使用正则表达式
onchange():值改变时执行事件
onblur():鼠标移出时执行事件
<!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>
<style>
select{
width: 100px;
}
form{
margin-top: 100px;
}
input{
border-color: chartreuse;
}
</style>
</head>
<body>
<center>
<form>
<input type="text" id="number1" onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && event.keyCode<48 || event.keyCode>57) event.returnValue=false" onchange="get_sum()">
<select id="operator" onchange="get_sum()">
<option value="1">+</option>
<option value="2">-</option>
<option value="3">*</option>
<option value="4">/</option>
<option value="5">%</option>
</select>
<input type="text" id="number2" onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && event.keyCode<48 || event.keyCode>57) event.returnValue=false" onchange="get_sum()">
<span>=</span>
<input type="text" id="result">
<br><br>
<input type="button" id="bt_result" value="计算" onclick="get_sum()">
</form>
</center>
<script>
function get_sum(){
var num1 = Number(document.getElementById("number1").value)
var num2 = Number(document.getElementById("number2").value)
var oper = document.getElementById("operator").value
var item = 0
switch(oper){
case "1":
item = (value=num1+num2).toFixed(3)
document.getElementById("result").value=item
break
case "2":
item = (value=num1-num2).toFixed(3)
document.getElementById("result").value=item
break
case "3":
item = (value=num1*num2).toFixed(3)
document.getElementById("result").value=item
break
case "4":
item = (value=num1/num2).toFixed(3)
document.getElementById("result").value=item
break
case "5":
item = (value=num1%num2).toFixed(3)
document.getElementById("result").value=item
break
}
}
</script>
</body>
</html>
实验结果：
以上是关于2021-06-08的主要内容，如果未能解决你的问题，请参考以下文章