使用JS实现简易计算器

2024-04-02 19:04:59 878人浏览薄情痞子

摘要

使用js完成简易计算器，供大家参考，具体内容如下要求：输入的值只能是数字，使用正则表达式 onchange():值改变时执行事件 onblur():鼠标移出时执行事件 <

使用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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: 使用JS实现简易计算器

本文链接: https://lsjlt.com/news/128175.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

使用JS实现简易计算器

使用JS完成简易计算器，供大家参考，具体内容如下要求：输入的值只能是数字，使用正则表达式 onchange():值改变时执行事件 onblur():鼠标移出时执行事件 <...

99+

2024-04-02
原生js实现简易计算器

本文实例为大家分享了js实现简易计算器的具体代码，供大家参考，具体内容如下最近，博主闲来无聊，就没事用js写了个简易计算器（博主是搞后端的，不是前端>_<）。其实，感觉...

99+

2024-04-02
JS怎么实现简易计算器

这篇文章主要介绍了JS怎么实现简易计算器的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JS怎么实现简易计算器文章都会有所收获，下面我们一起来看看吧。一、题目描述用户在弹...

99+

2024-04-02
利用JS实现加减简易计算器

目录前言实现思路前言这个题目前一周左右在小红书刷到，想着就去就做一下，第一版因为思路不清晰，没有完整的实现功能。后来忙着改论文，就一直拖到现在。想着回去在看看这篇，发现已经找不到...

99+

2024-04-02
js实现一个简易的计算器

利用原生js实现一个简易的计算器（附详细注释），供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <...

99+

2024-04-02
js制作简易计算器

本文实例为大家分享了js制作简易计算器的具体代码，供大家参考，具体内容如下要制作一个如图所示的简易计算器，首先要建立一个表单，制作出如图所示的样子。 <table bo...

99+

2024-04-02
js实现简易计数器功能

本文实例为大家分享了js实现简易计数器功能的具体代码，供大家参考，具体内容如下实现简易计数器可进行三个操作,开始计数,暂停计数,复位操作 (使用计时函数事件) <html&...

99+

2022-11-13

js 计数器
C#实现简易的计算器

本文实例为大家分享了C#实现简易的计算器的具体代码，供大家参考，具体内容如下 1 题目描述（1）Form1窗体设计界面如下：（2）运算类型的下列列表中包括：加法、减法、乘法、除...

99+

2024-04-02
jQuery实现简易的计算器

本文实例为大家分享了jQuery实现简易的计算器的具体代码，供大家参考，具体内容如下布局如下： css代码 #d1{ width: 400px; height: ...

99+

2024-04-02
iOS实现简易的计算器

本文实例为大家分享了iOS实现简易的计算器的具体代码，供大家参考，具体内容如下初步接触视图，制作了一个简易的计算器，基本上简单的计算是没有问题的，不是很完美，可能还有一些bug，再...

99+

2024-04-02
Android Studio实现简易计算器设计

本文实例为大家分享了Android Studio实现简易计算器的具体代码，供大家参考，具体内容如下一、题目 1、如图所示（实际设计，类似此界面样式即可，全屏时，按钮将会纵向拉伸），...

99+

2024-04-02
Python中怎么使用栈实现简易计算器

这篇文章主要介绍“Python中怎么使用栈实现简易计算器”，在日常操作中，相信很多人在Python中怎么使用栈实现简易计算器问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Python中怎么使用栈实现简易计算器...

99+

2023-06-02
使用JS实现简单计算器的方法

今天小编给大家分享的是使用JS实现简单计算器的方法，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。JS是什么JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为J...

99+

2023-06-14
Android实现简易计算器（可以实现连续计算）

发一个库存程序，好像是几个礼拜之前写的吧，是一个用安卓实现的简易的计算器，写这个小程序之前，看了很多人写的计算器，觉得使用一个 EditText，并将它设置为不可编写，是比较好...

99+

2022-06-06

Android
JavaScript实现简易加法计算器

本文实例为大家分享了JavaScript实现加法计算器的具体代码，供大家参考，具体内容如下具体要求： 1.页面布局: 2.还需要在点击计算按钮之后在页面上显示计算结果具体实现...

99+

2024-04-02
基于JavaScript实现简易计算器

本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"&g...

99+

2024-04-02
Android实现简易计算器功能

本项目为大家分享了Android实现计算器功能的具体代码，供大家参考，具体内容如下项目介绍练手项目。能实现加减乘除及括号运算。开发思路界面布局 1.界面布...

99+

2024-04-02
python实现简易计算器功能

本文实例为大家分享了python实现简易计算器功能的具体代码，供大家参考，具体内容如下一、功能目标用户输入一个类似 1-2*((60-30+(-40/5)*(9-2*...

99+

2024-04-02
Pyqt实现简易计算器功能

本文实例为大家分享了Pyqt实现简易计算器的具体代码，供大家参考，具体内容如下环境：pycharm、python3.7 首先用qtDesigner设计出如下界面。再用pyUIC...

99+

2024-04-02
android studio实现简易的计算器

本文实例为大家分享了android studio实现简易计算器的具体代码，供大家参考，具体内容如下先看效果图基本功能：加，减，乘，除核心代码实现 public class M...

99+

2024-04-02