使用JS实现简易计算器


Posted in Javascript onJune 14, 2021

使用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>
    <div 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>
    </div>
    <div style="text-align: center;">
        <input type="button"  id="button"value="计算">
    </div>
    <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 accDiv(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.div = function (arg){ 
        return accDiv(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=accDiv(num1,num2) ;
                    break;
            }
            document.getElementById('3').value=num3;
        }
       
    </script>

</body>
</html>

效果图:

使用JS实现简易计算器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
微信小程序 开发之全局配置
May 05 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
js实现移动端轮播图滑动切换
Dec 21 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 Javascript
微信小程序实现聊天室功能
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
React forwardRef的使用方法及注意点
原生Javascript+HTML5一步步实现拖拽排序
JS代码编译器Monaco使用方法
React中的Context应用场景分析
Jun 11 #Javascript
You might like
谈谈PHP语法(5)
2006/10/09 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
pandas数值计算与排序方法
2018/04/12 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
用Django写天气预报查询网站
2018/10/21 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
浅谈python标准库--functools.partial
2019/03/13 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
公司年会搞笑主持词
2014/03/24 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
个人先进事迹总结
2015/02/26 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
法人身份证明书
2015/06/18 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
安全生产协议书
2016/03/22 职场文书
导游词之沈阳植物园
2019/11/30 职场文书