Implementing a web calculator with native JavaScript

Implementing a web calculator with native JavaScript

This article shares the specific code of JavaScript to implement the web version of the calculator for your reference. The specific content is as follows

Because I was bored and looked through the system software on my computer, I came across the calculator function, so I will simply write about the functions of this calculator. This web version of the calculator has all the basic functions, but it is not very complete, so it is for reference only.

First, if you don't want to write the style of the web calculator by hand, you can just copy it.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        .cal {
            width: 420px;
            margin: 100px auto;
            background-color: #E6E6E6;
 
            padding: 2px;
            overflow: hidden;
        }
 
 
        .show {
            position: relative;
            width: 416px;
            height: 120px;
 
            font-size: 50px;
            line-height: 50px;
            font-weight: 700;
        }
 
        .show button {
            display: none;
 
            position: absolute;
            top: -2px;
            right: -2px;
 
            width: 60px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: transparent;
            background-color: #E6E6E6;
 
            font-size: 30px;
            font-weight: 100;
            cursor: pointer;
        }
 
        .show button:hover {
            background-color: #e81123;
            color: #f0f0f0
        }
 
        .res,
        .left,
        .right {
            position: absolute;
            bottom: 0;
 
            height: 60px;
            line-height: 60px;
            padding: 0 3px;
        }
 
        .res {
            right: 0;
            /* width: 100%; */
 
            text-align: right;
        }
 
        .left {
            display: none;
            background-color: #E6E6E6;
        }
 
        .right {
            display: none;
            right: 0;
            background-color: #E6E6E6;
        }
 
        .left:hover,
        .right:hover {
            color: #2e8eda;
        }
 
        .keyboard {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
 
 
 
        .btn {
            display: flex;
            justify-content: center;
 
            width: 100px;
            height: 60px;
            line-height: 60px;
            margin: 2px;
 
            background-color: #f0f0f0;
            border: transparent;
 
            font-size: large;
        }
 
        .btn:hover {
            background-color: #d6d6d6;
        }
 
        .digital {
            background-color: #fafafa;
            font-weight: 700;
        }
 
        .equal {
            background-color: #8abae0;
        }
 
        .equal:hover {
            background-color: #4599db;
        }
    </style>
</head>
 
<body>
 
    <div class="cal">
        <div class="show">
            <button class="close">×</button>
            <div class="res">0</div>
            <div class="left">&lt;</div>
            <div class="right">&gt;</div>
        </div>
        <div class="keyboard">
            <!-- 0 -->
            <button class="btn percent">%</button>
            <!-- 1 -->
            <button class="btn clearOne">CE</button>
            <!-- 2 -->
            <button class="btn clearAll">C</button>
            <!-- 3 -->
            <button class="btn back">del</button>
            <!-- 4 -->
            <button class="btn div1">1/x</button>
            <!-- 5 -->
            <button class="btn square">x²</button>
            <!-- 6 -->
            <button class="btn sqrt">²√x</button>
            <!-- 7 -->
            <button class="btn div">÷</button>
            <!-- 8 -->
            <button class="btn digital">7</button>
            <!-- 9 -->
            <button class="btn digital">8</button>
            <!-- 10 -->
            <button class="btn digital">9</button>
            <!-- 11 -->
            <button class="btn mul">x</button>
            <!-- 12 -->
            <button class="btn digital">4</button>
            <!-- 13 -->
            <button class="btn digital">5</button>
            <!-- 14 -->
            <button class="btn digital">6</button>
            <!-- 15 -->
            <button class="btn sub">-</button>
            <!-- 16 -->
            <button class="btn digital">1</button>
            <!-- 17 -->
            <button class="btn digital">2</button>
            <!-- 18 -->
            <button class="btn digital">3</button>
            <!-- 19 -->
            <button class="btn add">+</button>
            <!-- 20 -->
            <button class="btn neg">+/-</button>
            <!-- 21 -->
            <button class="btn digital">0</button>
            <!-- 22 -->
            <button class="btn digital">.</button>
            <!-- 23 -->
            <button class="btn equal">=</button>
        </div>
    </div>
    <script src="./computer.js"></script>
</body>
 
</html>

js part:

const bt = document.querySelectorAll('.keyboard button')
const close = document.querySelector('.close')
const res = document.querySelector('.res')
//When the number is clicked, let k = 0
let one
let two
function arr(num) {
    bt[num].onclick = function () {
        res.innerText += bt[num].innerText
        res.innerText = parseFloat(res.innerText)
        // console.log(one)
 
    }
}
//Decimal point //Keep the result decimal function fn() {
    if (res.innerText.length > 8) {
        res.innerText = res.innerText.slice(0, 10)
    }
    if (res.innerText == 'NaN') {
        res.innerText = 0
    }
 
}
 
//When the operator is clicked, function symbol(str, fu) {
    bt[str].onclick = function () {
        k++
        if (k > 1) {
            return
        }
        one = parseFloat(res.innerText)
        // switch (fu) {
        // case '+':
        // one += one
        // break;
        // case '-':
        // one -= one
        // break;
        // case '*':
        // one *= one
        // break;
        // case '/':
        // one /= one
        // break;
        // }
        res.innerText = ''
        close.style.display = 'block'
        close.innerText = bt[str].innerText
        console.log(one)
    }
}
 
arr(21)
arr(18)
arr(17)
arr(16)
arr(14)
arr(13)
arr(12)
arr(10)
arr(9)
arr(8)
arr(22)
//Operation symbol symbol(0)
symbol(7, '/')
symbol(11, '*')
symbol(15, '-')
symbol(19, '+')
console.log(bt[22].innerText)
bt[22].onclick = function () {
    res.innerText += bt[22].innerText
    console.log(565)
}
bt[23].onclick = function () {
    two = parseFloat(res.innerText)
    switch (close.innerText) {
        case '%':
            // toFixed(11) retains 11 decimal places res.innerText = one % two
            k = 0
            break;
        case '+':
            res.innerText = one + two
            k = 0
            break;
        case '-':
            res.innerText = one - two
            k = 0
            break;
        case 'x':
            res.innerText = one * two
            k = 0
            break;
        case '÷':
            res.innerText = one / two
            k = 0
            break;
    }
    // console.log(res.innerText.length)
    fn()
 
 
}
bt[1].onclick = function () {
    res.innerText = ''
}
bt[2].onclick = function () {
    res.innerText = '0'
    close.innerText = 'x'
    close.style.display = ''
    one = 0
    two = 0
}
bt[3].onclick = function () {
    res.innerText = res.innerText.slice(0, res.innerText.length - 1)
    if (res.innerText.length === 0) {
        res.innerText = '0'
        return
    }
}
bt[4].onclick = function () {
    res.innerText = 1 / parseFloat(res.innerText)
    fn()
}
bt[5].onclick = function () {
    res.innerText = parseFloat(res.innerText) * parseFloat(res.innerText)
    fn()
}
 
bt[6].onclick = function () {
    res.innerText = Math.sqrt(parseFloat(res.innerText))
    fn()
}
bt[20].onclick = function () {
    res.innerText = 0 - parseFloat(res.innerText)
    fn()
}

The above code makes a simple computer. 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:
  • Implementing a simple age calculator based on HTML+JS
  • Detailed explanation of the process of realizing calculator function in javascript
  • JavaScript implements simple calculator function
  • js version to realize calculator function
  • Native js to implement a simple calculator
  • Implementing a simple calculator with javascript
  • Writing a web calculator using javascript
  • JavaScript Example - Implementing a Calculator

<<:  Detailed explanation of CSS to achieve the effect of illuminating the border by imitating the Windows 10 mouse

>>:  Detailed analysis of MySQL 8.0 memory consumption

Recommend

Implementation code of Nginx anti-hotlink and optimization in Linux

Hide version number The version number is not hid...

Analysis of statement execution order of sql and MySQL

I encountered a problem today: Can I use the as a...

Django2.* + Mysql5.7 development environment integration tutorial diagram

environment: MAC_OS 10.12 Python 3.6 mysql 5.7.25...

Problems and pitfalls of installing Mysql5.7.23 in Win10 environment

I read many tutorials, but found that I could nev...

Detailed explanation of the WeChat applet request pre-processing method

question Because some of our pages request data i...

Solution to the problem of MySQL deleting and inserting data very slowly

When a company developer executes an insert state...

WeChat applet custom tabbar component

This article shares the specific code of the WeCh...

The correct way to migrate MySQL data to Oracle

There is a table student in the mysql database, i...

Detailed explanation of the principle of Docker image layering

Base image The base image has two meanings: Does ...

Detailed explanation of Vue monitoring attribute graphic example

Table of contents What is the listener property? ...

Detailed explanation of mysql transaction management operations

This article describes the MySQL transaction mana...

Docker core and specific use of installation

1. What is Docker? (1) Docker is an open source t...

HTML Tutorial: Collection of commonly used HTML tags (5)

Related articles: Beginners learn some HTML tags ...