JavaScript 简易网页计算器实现
作者:拾光时间:2026-10-24 10:18:49浏览:657
本文展示了一个基于 JavaScript 实现的简易网页计算器。通过 prompt 获取操作数与运算符,利用 parse 函数处理逻辑,并分别实现加减乘除运算。代码包含基础输入校验与功能函数,适合前端初学者参考学习。
JavaScript 简易网页计算器实现
本文分享了一个使用 JavaScript 编写的网页计算器实例代码,供读者参考学习。
运行效果展示
首先展示计算器的运行效果,具体表现如下所示。




输入校验功能
该计算器具备对输入数字及运算符的校验功能,确保数据格式正确。


源代码解析
以下是完整的源代码展示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
<script language="javascript">
var oper1=prompt("请输入第一个操作数:");
var oper2=prompt("请输入第二个操作数:");
var operator=prompt("请输入运算符(+,-,*,/)");
parse();
var result;
switch(operator)
{
case"+":
result=doSum(oper1,oper2);
alert(oper1+"+"+oper2+"="+result);
break;
case"-":
result=doSubstract(oper1,oper2);
alert(oper1+"-"+oper2+"="+result);
break;
case"*":
result=doMultiply(oper1,oper2);
alert(oper1+"*"+oper2+"="+result);
break;
case"/":
result=doDivide(oper1,oper2);
alert(oper1+"/"+oper2+"="+result);
break;
default:
alert("输入的运算符不合法");
}
function parse(){
if(isNaN(oper1)||isNaN(oper2)){
alert("输入的数字不合法");
}
else{
oper1=parseFloat(oper1);
oper2=parseFloat(oper2);
}
}
function doSum(oper1,oper2){
return oper1+oper2;
}
function doSubstract(oper1,oper2){
return oper1-oper2;
}
function doMultiply(oper1,oper2){
return oper1*oper2;
}
function doDivide(oper1,oper2){
return oper1/oper2;
}
</script>
</head>
<body>
</body>
</html>
界面优化建议
上述代码仅展示了 JavaScript 逻辑部分。实际应用中,可结合 HTML 和 CSS 优化界面外观,提升用户体验。
以上就是本文的全部内容,希望能为读者的学习提供有益帮助,欢迎继续支持本站。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
