使用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 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
js自定义回调函数
Dec 13 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
微信小程序实现聊天室功能
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
React forwardRef的使用方法及注意点
原生Javascript+HTML5一步步实现拖拽排序
JS代码编译器Monaco使用方法
React中的Context应用场景分析
Jun 11 #Javascript
You might like
一道关于php变量引用的面试题
2010/08/08 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
动态加载iframe
2006/06/16 Javascript
JavaScript OOP类与继承
2009/11/15 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
Python多线程下载文件的方法
2015/07/10 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
初三学习计划书范文
2014/04/30 职场文书
公司委托书怎么写
2014/08/02 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
交通事故和解协议书
2015/01/27 职场文书
单位介绍信格式
2015/01/31 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python