Using JS to implement a simple calculator

Using JS to implement a simple calculator

Use JS to complete a simple calculator for your reference. The specific contents are as follows

Requirements: The input value can only be a number, use a regular expression
onchange(): Executes an event when the value changes
onblur(): Executes an event when the mouse moves out

<!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>Calculator</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">Please select</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="calculate">
    </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 modified by deeka
     // Dynamically control the precision length n=(r1>=r2)?r1:r2;
        return ((arg1*m-arg2*m)/m).toFixed(n);
    }
    function accMul(arg1,arg2) //multiplication { 
        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) 
        } 
 
    //Add a mul method to the Number type to make it more convenient to call. 
    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>

Effect picture:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • A simple calculator written in javascript, with a lot of content and practical methods. Recommended
  • Simple js code to realize calculator operation
  • js implements a simple calculator
  • HTML+JS implements simple calculator code (addition, subtraction, multiplication and division)
  • Simple calculator implementation code written in JS
  • js implements a simple calculator
  • javascript-simple calculator implementation step decomposition (with pictures)
  • Pure javascript code to implement calculator functions (three methods)
  • Simple implementation of js web calculator
  • Web calculator A JS calculator

<<:  Summary of MySQL common SQL statements including complex SQL queries

>>:  Zabbix monitors the process of Linux system services

Recommend

Detailed explanation of the usage and difference between nohup and & in Linux

Example: We use the Python code loop_hello.py as ...

Public multi-type attachment image upload area in Vue page and applicable folding panel (sample code)

In front-end projects, attachment uploading is a ...

User needs lead to marketing-oriented design

<br />For each of our topics, the team will ...

A brief analysis of the problem of mysql being inaccessible when deployed with docker-compose

What is Docker-Compose The Compose project origin...

Abbreviation of HTML DOCTYPE

If your DOCTYPE is as follows: Copy code The code ...

How to handle forgotten passwords in Windows Server 2008 R2

What to do if you forget Windows Server 2008R2 So...

Vue implements Tab tab switching

This article example shares the specific code of ...

Textarea text area width and height width and height automatic adaptation implementation code

Copy code The code is as follows: <HTML> &l...

MySQL takes out the comma-separated values ​​from a field to form a new field

1For example: To split the fields shown in Figure...

How to implement simple data monitoring with JS

Table of contents Overview first step Step 2 Why ...

The docker prune command can be used to periodically clean up infrequently used data

Table of contents docker system df docker system ...

MySQL5.7.03 Replacement of higher version to MySQL 5.7.17 Installation process and solutions to problems found

1. How to install? 1. [Run] -> [cmd] to open t...

A more elegant error handling method in JavaScript async await

Table of contents background Why error handling? ...

Detailed explanation of JavaScript's built-in Date object

Table of contents Date Object Creating a Date Obj...

Call and execute host docker operations in docker container

First of all, this post is dedicated to Docker no...