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 for infinite scrolling with n container elements

Scenario How to correctly render lists up to 1000...

How to install MySQL database on Debian 9 system

Preface Seeing the title, everyone should be thin...

How to remove inline styles defined by the style attribute (element.style)

When modifying Magento frequently, you may encount...

JS Canvas interface and animation effects

Table of contents Overview Canvas API: Drawing Gr...

Solution to forgetting the administrator password of mysql database

1. Enter the command mysqld --skip-grant-tables (...

Vue implements user login switching

This article example shares the specific code of ...

Interviewers often ask questions about React's life cycle

React Lifecycle Two pictures to help you understa...

JavaScript BOM Explained

Table of contents 1. BOM Introduction 1. JavaScri...

How to convert JavaScript array into tree structure

1. Demand The backend provides such data for the ...

Django uses pillow to simply set up verification code function (python)

1. Import the module and define a validation stat...

HTML validate HTML validation

HTML validate refers to HTML validation. It is the...

Detailed explanation of the construction and use of Docker private warehouse

The image can be saved on hub.docker.com, but the...

Detailed steps to install JDK and Tomcat in Linux environment

Table of contents 1. Install JDK Manual Installat...