JavaScript简易计算器制作

更新时间：2020-10-01 02:30:01 作者：startmvc

本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下成

本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下

成品图

这个简易的计算器只能实现 + - * /的运算

在动手之前，我们要先理清思路，看图，若想实现这样一个简易的计算器，我们需要两个输入框用来存放我们需要进行运算的两个值，一个下拉框来选择要进行什么运算，一个按钮来实现开始运算，一个输入框来保存我们计算后的值！

首先，我们在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的地方了


<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>

这样一个简易的页面计算器就做好了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。