用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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- js如何生成随机数
- 利用前端做扫雷游戏(js实现经典扫雷游戏)
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- js实现自动轮播(原生js封装无缝轮播功能)
- js页面跳转的几种代码
- node.js express 上线(node+express实现分页效果)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- nodejs的广播机制(node.js如何自定义实现一个EventEmitter)
- jsonkeyvalue怎么取(替换json对象中的key最佳方案)
- mysql xml转换json(Mysql将查询结果集转换为JSON数据的实例代码)
- js数组排序有哪些(js将多维数组转为一维数组后去重排序)
- 微信发送镭射效果代码(JS实现微信"炸屎"大作战功能)
- mysql的json格式解析(mysql json格式数据查询操作)
- JS让打开的窗口居中
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- 玩网游居然让人更友善 很难以让人置信(玩网游居然让人更友善)
- 学好汉语拼音,从娃娃绕口令抓起,平时还是要多练 收藏好(从娃娃绕口令抓起)
- 仙女们的私藏鲜法大PK 鲜香切块牛肉(仙女们的私藏鲜法大PK)
- 天热没胃口 这道菜开胃又下饭,2个小技巧新手一学就会(这道菜开胃又下饭)
- 指天椒紫苏爆炒牛肉(指天椒紫苏爆炒牛肉)
- 谷雨前,吃牛羊肉别忘了吃河鲜,除湿还清热,加紫苏一炒特解馋(吃牛羊肉别忘了吃河鲜)
热门推荐
- phpredis常用方法(PHP针对redis常用操作实例详解)
- nginx 反向代理详细配置(nginx反向代理配置去除前缀案例教程)
- dockertomcat多开实例(Docker tomcat的设置内存大小配置方式)
- vmware使用教程win10(VMware Workstation安装并安装WIN10操作系统连接外网步骤指导超详细教程)
- sqlserver怎么手动添加数据库表(SQL Server 数据库调整表中列的顺序操作方法及遇到问题)
- docker装redis(通过Docker部署Redis 6.x集群的方法)
- sqlserver查询表结构(sql server递归子节点、父节点sql查询表结构的实例)
- jsfor循环是什么意思(JavaScript中三种for循环语句的使用总结for、for...in、for...of)
- thinkphp接口开发实例(ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解)
- html5基本标签详解(HTML5 通过Vedio标签实现视频循环播放的示例代码)