本文提供基于JavaScript和HTML5的简易计算器实现方案。通过获取用户输入的数字与运算符，利用switch语句判断运算类型，执行加减乘除逻辑并处理异常。代码包含完整的前端布局与交互脚本，适合初学者学习DOM操作与基础逻辑控制。
JavaScript简易计算器实现
本文详细介绍如何使用JavaScript编写一个简易计算器，并提供完整代码供读者参考。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<!--页面布局-->
<input type="text" id="num1" placeholder="请输入第一个数字"/>
<input type="text" id="operator" placeholder="请输入运算符">
<input type="text" id="num2" placeholder="请输入第二个数字"/>
<input type="button" onclick="count()" value="计算"/><br/>
<span>计算结果：</span><span id="result"></span>
<!--JavaScript-->
<script>
function count() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var operator = document.getElementById("operator").value;
var num = "";
//判断输入的两个数字是否为数字,如果为数字，返回结果为false
var num1 = parseFloat(num1);
var num2 = parseFloat(num2);
var isNotNumber = isNaN(num1) || isNaN(num2);
if (!isNotNumber) {
switch (operator) {
case "+":
num = num1 + num2;
break;
case "-":
num = num1 - num2;
break;
case "*":
num = num1 * num2;
break;
case "/":
if (num2 == 0) {
// 除数不能为0
alert("除数不能为0");
} else {
num = num1 / num2;
break;
}
default:
alert("请输入正确的运算符！！！");
}
num = num.toFixed(2);
document.getElementById("result").innerText = num;
} else {
alert("请输入数字！！！")
}
}
</script>
</body>
</html>以下是该计算器运行时的界面效果展示。
接下来展示具体的测试运行结果。
以上就是JavaScript实现简易计算器的全部内容，希望这段代码能为您的学习提供便利，欢迎继续支持本站获取更多技术资源。