利用JS制作简易计算器

目的：利用JS制作一个简易的计算器，能够实现简单四则运算
要求：三个输入框输入值只能是数字，当输入非数字时提示并清空输入框，利用正则表达式；点击按钮实现计算。
话不多说，贴图为上：

看了效果图，下面就是怎么实现的问题了，请看代码：

<html>
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>计算器</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" media="screen" href="main.css" /><script src="main.js"></script><!--元素样式设置，只是为了好看，真要简易可以不设置--><style>/* 设置input输入框样式 */input{height: 30px;}/* 设置div外边距、高度、内容居中 */div{margin: 50px;height: 40px;text-align: center;}/* 设置button外边距，高宽度 */button{margin:10px;width: 100px;height: 40px;}</style>
</head><body><div><!-- 第一个数字 --><input type="text" id="num1" onchange="fun(this.id)"><!-- 下拉选择框select--><select id="sym"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><!-- 第二个数字 --><input type="text" id="num2" onchange="fun(this.id)">=<!-- 结果 --><input type="text" id="result" onchange="fun(this.id)"></div><div><!-- 计算按钮 --><button id="bt">计算</button></div><script>// 设置三个输入框只能输入数字function fun(id) {var patrn = /^\d+(\.\d+)?$/;//正则表达式匹配规则var num = document.getElementById(id);//获取元素//正则表示式匹配到非数字时，提示并清空输入框if (!patrn.exec(num.value)) {alert("只能输入数字！");num.value = "";}}var bt = document.getElementById("bt");//获取按钮bt.onclick = function () {//设置按钮点击事件var result = 0;//存储结果var num1 = document.getElementById("num1");var num2 = document.getElementById("num2");var re = document.getElementById("result");var sym = document.getElementById("sym");switch (sym.value) {//判断选择的符号case "+":result = parseFloat(num1.value) + parseFloat(num2.value);break;case "-":result = parseFloat(num1.value) - parseFloat(num2.value);break;case "*":result = parseFloat(num1.value) * parseFloat(num2.value);break;case "/":result = parseFloat(num1.value) / parseFloat(num2.value);break;}re.value = result;//结果填入}</script>
</body>
</html>

由于是简易版所以没有进行精度容错的处理，就会出现下面这种情况：

至于会出现精度容错问题的原因很简单，因为计算器进行的都是二进制的运算，所以当转换进制的时候会出现无法完全转换的情况，好比10/3一直除不尽。比如：将十进制数0.26转换成二进数就会变成：0.01000010100011……。
解决的办法网上资源很多的，这里附上一个链接方便学习哈：https://blog.csdn.net/Honiler/article/details/86559589

利用JS制作简易计算器相关推荐

html猜随机数游戏,用js制作简易计算器及猜随机数字游戏
JS简易计算器 input[type="button"] { height:55px; width:55px; background-image: -webkit-linear-g ...
JavaScript初学入门（JS打印9*9乘法表，JS制作简易计算器）
目录网页的三部分组成: Java和JavaScript的关系: JavaScript的三种使用方式: Js的5种输出方式: Js的语法初始: js中值的类型: JS中的运算符: JS中的流程控制语句 ...
js装修计算器java代码_JS制作简易计算器的实例代码
做一个简易计算器,效果图片 c表示清空,为一个空字符串 +/-表示该值为正还是负 %表示当前值/100 ←表示退格,往前删除一个值 eval 函数是能够计算出字符串表达式或者语句的结果,把结果求出来. ...
利用Unity3D制作简易2D计算器
利用Unity3D制作简易2D计算器标签(空格分隔): uiniy3D 1. 操作流程在unity3DD中创建一个新项目注意选择是2D的(因为默认3D) 在Assets框右键新建C#脚本在新建 ...
java利用监听器制作红绿灯_利用js实现简易红绿灯
HTML代码: 在一个div容器内,设置3个span CSS代码: .red_light { width: 200px; height: 200px; border-radius: 50%; marg ...
利用jQuery制作简易手风琴
利用jQuery制作简易手风琴实现步骤 1.引入jQuery文件 2.将写好的标签进行样式修改 3.逻辑代码的书写我们先来看看效果: 实现步骤 1.引入jQuery文件 <script sr ...
初学JS——利用JS制作的别踩白块儿（街机模式）小游戏
初学JS--利用JS制作的别踩白块儿(街机模式) 小游戏这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是可能普通模式的别踩白块儿因为他的"块儿"是 ...
利用jQuery制作简易弹幕效果
利用jQuery制作简易弹幕效果实现步骤: 1.制作样式 2.逻辑,思路实现步骤: 1.制作样式我们先来看看body中的代码: <body><div class="b ...
怎么用python自制计算公式_手把手教你用python制作简易计算器，能够记录你使用的情况...
话不多说,首先先看效果图,它能够记录你在使用过程中的历史,方便你查看是否有错: 接下来就仔细分析一下是如何制作的: 简易计算器第一步:导入资源库在过程中使用到了tkinter这个资源库,win+R ...

利用JS制作简易计算器

利用JS制作简易计算器相关推荐

最新文章

热门文章