效果图如下:
<!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>
<body>
<input type="number" id="f1" pattern="/^-?\d+\.?\d*$/">
<select id="s-all">
<option value="+" id="s1">+</option>
<option value="-" id="s2">-</option>
<option value="*" id="s3">*</option>
<option value="/" id="s4">/</option>
</select>
<input type="number" id="f2" pattern="/^-?\d+\.?\d*$/">
=<input type="number" id="f3">
<br>
<button onclick="count()">计算</button>
<script>
function count() {
var a = document.getElementById("f1").value;
var b = document.getElementById("f2").value;
var sel = document.getElementById("s-all").value;
var result;
switch (sel) {
case ("+"):
var result = parseInt(a) + parseInt(b);
break;
case ("-"):
var result = parseInt(a) - parseInt(b);
break;
case ("*"):
var result = parseInt(a) * parseInt(b);
break;
case ("/"):
var result = parseInt(a) / parseInt(b);
break;
default:
break;
}
document.getElementById("f3").value = result;
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<