JavaScript简易计算器制作
更新时间：2020年01月17日 14:34:20 作者：Qiie
这篇文章主要为大家详细介绍了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>
这样一个简易的页面计算器就做好了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
学习layer弹出框，之前项目是用bootstrap模态框，后来改用layer弹出框，在文章的后面，我会分享项目的一些代码,需要的朋友可以参考下2017-08-08
这篇文章主要给大家介绍了一个JS操作符in问题引发的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
json格式的时间显示为：Date(1377828670436)需要转换为正常年月日，具体的实现思路及代码如下，感兴趣的朋友可以参考下2013-09-09
这篇文章主要给大家介绍了如何通过一篇文章快速从零快速上手Rollup的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了JS实现的数组全排列输出算法,实例分析了全排列的原理与相关的javascript实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
首先我们看看观察者的概念 观察者模式：定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新。2009-10-10
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Vigenere密码就是一种传统加密技术，它是多表代换密码，能够有效改进单表代换密码的词频分布特征问题,本文用JavaScript实现维吉尼亚(Vigenere)密码算法2013-11-11
深入理解JavaScript中的call、apply、bind方法的区别
下面小编就为大家带来一篇深入理解JavaScript中的call、apply、bind方法的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了JavaScript RegExp 对象用法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了基于JS实现根据密码长度显示安全条功能，非常不错，在一些网站上经常会遇到此功能，需要的的朋友参考下实现代码吧2017-03-03
最新评论