用js做一个计算器(使用JS实现简易计算器)
类别:编程学习 浏览量:2244
时间:2021-11-05 14:33:48 用js做一个计算器
使用JS实现简易计算器使用JS完成简易计算器,供大家参考,具体内容如下
要求:输入的值只能是数字,使用正则表达式
onchange():值改变时执行事件
onblur():鼠标移出时执行事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>计算器</title> </head> <body> <li style="text-align: center;"> <input type="text" id="1" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " > <select name="select" id="select"> <option value="null">请选择</option> <option value="0">+</option> <option value="1">-</option> <option value="2">*</option> <option value="3">/</option> </select> <input type="text" id="2" onkeyup="this.value=this.value.replace(/[^\d]/g,'') "> = <input type="text" id="3" onkeyup="this.value=this.value.replace(/[^\d]/g,'') "><br><br> </li> <li style="text-align: center;"> <input type="button" id="button"value="计算"> </li> <script> function accAdd(arg1,arg2){ var r1,r2,m; try{ r1=arg1.toString().split(".")[1].length }catch(e){ r1=0 } try{ r2=arg2.toString().split(".")[1].length }catch(e){ r2=0 } m=Math.pow(10,Math.max(r1,r2)) return (arg1*m+arg2*m)/m } Number.prototype.add = function (arg){ return accAdd(arg,this); } function Subtr(arg1,arg2){ var r1,r2,m,n; try{ r1=arg1.toString().split(".")[1].length }catch(e){ r1=0 } try{ r2=arg2.toString().split(".")[1].length }catch(e){ r2=0 } m=Math.pow(10,Math.max(r1,r2)); // last modify by deeka // 动态控制精度长度 n=(r1>=r2)?r1:r2; return ((arg1*m-arg2*m)/m).toFixed(n); } function accMul(arg1,arg2) //乘法 { var m=0,s1=arg1.toString(),s2=arg2.toString(); try{ m+=s1.split(".")[1].length }catch(e){} try{ m+=s2.split(".")[1].length }catch(e){} return Number(s1.replace(".",""))*Number(s2.replace(".","")) / Math.pow(10,m) } //给Number类型增加一个mul方法,调用起来更加方便。 Number.prototype.mul = function (arg){ return accMul(arg, this); } function accli(arg1,arg2){ var t1=0,t2=0,r1,r2; try{ t1=arg1.toString().split(".")[1].length }catch(e){} try{ t2=arg2.toString().split(".")[1].length }catch(e){} with(Math){ r1=Number(arg1.toString().replace(".","")) r2=Number(arg2.toString().replace(".","")) return (r1/r2)*pow(10,t2-t1); } } Number.prototype.li = function (arg){ return accli(this, arg); } document.getElementById('button').onclick=function(){ var num1 =document.getElementById('1').value; var num2 =document.getElementById('2').value; var num3; var op =document.getElementById('select').value; switch(op){ case '0': num3= accAdd(num1,num2); break; case '1': num3= Subtr(num1,num2) ; break; case '2': num3=accMul(num1,num2) ; break; case '3': num3=accli(num1,num2) ; break; } document.getElementById('3').value=num3; } </script> </body> </html>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js图片水印库(js给图片打马赛克的方法示例)
- js实现string.format 字符串占位符
- html5和css3最新特性(html5中使用hotcss.js实现手机端自适配的方法)
- html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
- 怎么用织梦上传源码(如何把织梦dedecms数据生成json)
- jQuery多个版本间,以及与其他js文件冲突的解决方法
- js中什么是宏任务(浅谈JavaScript宏任务和微任务执行顺序)
- auto.js源码分享(最新热门脚本Autojs源码分享)
- js截取字符串
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- js右下角提示框
- sqlserver常见函数(SQL Server之JSON 函数详解)
- php抽奖功能(php+lottery.js实现九宫格抽奖功能)
- js分号的使用
- 通过js获取Url的参数值
- js淘宝购物车效果代码(JavaScript实现电商平台商品细节图)
- 二胎家庭老大爱闹情绪,用这招很有效(二胎家庭老大爱闹情绪)
- 一个30岁男人外遇失败的全过程(一个30岁男人外遇失败的全过程)
- 《无敌破坏王2》 不聊彩蛋,聊聊我从动画里看到的现实那些事儿(无敌破坏王2不聊彩蛋)
- 《寄生虫》 三观不正 人类悲欢从来不相通,感同身受也并非本能(寄生虫三观不正)
- 这部动漫中的女孩子,可比101女孩更加励志(这部动漫中的女孩子)
- 《白狐的人生》热拍 贾征宇偶像包袱难自弃 图(白狐的人生热拍)
热门推荐
- mysql生成唯一订单号(MySQL高并发生成唯一订单号的方法实现)
- linuxsed命令入门(Linux sed命令的使用)
- linq 排序
- dedecms无缩略图怎么设置(dedecmsV5.7版 tag标签长度的修改方法详解)
- 织梦数据库连接失败是什么意思(织梦上传服务器后数据连接失败问题的解决方法)
- udp协议可提供简单的无连接服务吗(UDP连接对象原理解析及使用实例)
- pandas导入及数据结构用法(pandas数据集的端到端处理)
- mysql数据库死锁原理(MySQL数据库锁机制原理解析)
- sql中row的用法(sql server数据库中raiserror函数用法的详细介绍)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)