JavaScript 简易网页计算器实现

作者:拾光时间:2026-10-24 10:18:49浏览:657

本文展示了一个基于 JavaScript 实现的简易网页计算器。通过 prompt 获取操作数与运算符,利用 parse 函数处理逻辑,并分别实现加减乘除运算。代码包含基础输入校验与功能函数,适合前端初学者参考学习。

JavaScript 简易网页计算器实现

本文分享了一个使用 JavaScript 编写的网页计算器实例代码,供读者参考学习。

运行效果展示

首先展示计算器的运行效果,具体表现如下所示。

JavaScript 简易网页计算器实现

JavaScript 简易网页计算器实现

JavaScript 简易网页计算器实现

JavaScript 简易网页计算器实现

输入校验功能

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

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 优化界面外观,提升用户体验。

以上就是本文的全部内容,希望能为读者的学习提供有益帮助,欢迎继续支持本站。

作者最新文章