使用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 相关文章推荐
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
JavaScript实现分页效果
Mar 28 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
微信小程序实现聊天室功能
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
React forwardRef的使用方法及注意点
原生Javascript+HTML5一步步实现拖拽排序
JS代码编译器Monaco使用方法
React中的Context应用场景分析
Jun 11 #Javascript
You might like
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
python发送邮件实例分享
2017/07/28 Python
python奇偶行分开存储实现代码
2018/03/19 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Python super()方法原理详解
2020/03/31 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
企业宣传标语
2014/06/09 职场文书
演讲比赛策划方案
2014/06/11 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
班主任寄语2016
2015/12/04 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python