JavaScript简易计算器实现教程

JavaScript简易计算器实现教程

本文将分享使用JavaScript实现简易计算器的具体代码，供读者参考学习。

成品展示

该简易计算器仅支持加、减、乘、除四种基本运算。

在开始编码前，需明确实现逻辑。参考界面设计，实现此计算器需要两个输入框用于存储参与运算的两个数值，一个下拉菜单用于选择运算符号，一个按钮触发计算过程，以及另一个输入框用于展示计算结果。

首先，在HTML的body部分构建上述页面所需的元素结构。

<body>
 <input type="text" id="ipt1">
 <select name="" id="slt">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
 </select>
 <input type="text" id="ipt2">
 <button id="btn">=</button>
 <input type="text" id="ipt3">
</body>

上述代码中的id属性名称可自定义，只要确保后续JavaScript中能正确获取即可。接下来是核心的JavaScript逻辑部分。

<body>
 <script>
  //获取页面标签的元素
  var inpt1 = document.getElementById("ipt1");
  var inpt2 = document.getElementById("ipt2");
  var inpt3 = document.getElementById("ipt3");
  var selt = document.getElementById("slt");
  var butn = document.getElementById("btn");
  
 //给等于按钮添加点击事件
  butn.onclick = function(){
   //将三个输入框的value值分别赋给变量t1,t2,t3中
   var t1 = parseFloat(ipt1.value);
   var t2 = parseFloat(ipt2.value);
   var t3 = parseFloat(ipt3.value);

 //定义一个结果变量用于存放结果
   var endValue;
   //用switch语句来写运算语句
   switch(slt.value){
    case "+":
    endValue = t1 + t2;
    break;
    case "-":
    endValue = t1 - t2;
    break;
    case "*":
    endValue = t1 * t2;
    break;
    case "/":
    endValue = t1 / t2;
    break;
    default:
    endValue = t1 + t2;
    break;
   }
   //将结果放入结果输入框的value值中，在页面上显示
   inpt3.value = endValue;
  }
 </script>
</body>

至此，一个简易的页面计算器便制作完成。

以上就是本文的全部内容，希望对各位的学习有所帮助，欢迎大家继续支持本站。