使用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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
微信小程序实现聊天室功能
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
React forwardRef的使用方法及注意点
原生Javascript+HTML5一步步实现拖拽排序
JS代码编译器Monaco使用方法
React中的Context应用场景分析
Jun 11 #Javascript
You might like
PHP 已经成熟
2006/12/04 PHP
php中文本操作的类
2007/03/17 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python判断操作系统类型代码分享
2014/11/22 Python
Python创建系统目录的方法
2015/03/11 Python
Python单链表简单实现代码
2016/04/27 Python
使用python实现生成用户信息
2017/03/20 Python
详解Python中的四种队列
2018/05/21 Python
Python多继承原理与用法示例
2018/08/23 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python计算n的阶乘的方法代码
2019/10/25 Python
Python安装whl文件过程图解
2020/02/18 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
铭立家具面试题
2012/12/06 面试题
企业党员个人自我评价
2014/09/20 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
致运动员赞词
2015/07/22 职场文书