使用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 创建对象
Jul 17 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
微信小程序实现聊天室功能
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
React forwardRef的使用方法及注意点
原生Javascript+HTML5一步步实现拖拽排序
JS代码编译器Monaco使用方法
React中的Context应用场景分析
Jun 11 #Javascript
You might like
php 冒泡排序 交换排序法
2011/05/10 PHP
深入解析php之apc
2013/05/15 PHP
php微信支付之APP支付方法
2015/03/04 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
python实现定时发送邮件
2020/12/23 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
法学研究生自我鉴定范文
2013/12/04 职场文书
中国梦的演讲稿
2014/01/08 职场文书
档案检查欢迎词
2014/01/13 职场文书
三方协议书范本
2014/04/22 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
竞聘上岗演讲
2014/05/19 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
党小组评议意见
2015/06/02 职场文书
销售人员管理制度
2015/08/06 职场文书
国庆节主题班会
2015/08/15 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
如何利用python实现列表嵌套字典取值
2022/06/10 Python