Writing a web calculator using javascript

This article mainly records the effect of using javscript to realize a web calculator for your reference. The specific content is as follows

Without further ado, the code is as follows:

First is the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Using js to implement a web calculator</title>
    <link rel="stylesheet" href="cal.css" >
</head>
<body>
<div id="container" class="container">
    <input id="result" class="result">
    <div id="cal" class="clearfix">
        <div id="num" class="fl">
            <div id="top" class="clearfix">
                <input id="clear" type="button" value="C">
                <input id="antonyms" type="button" value="+/-">
                <input id="remainder" type="button" value="%">
            </div>
            <div id="bonttom" class="clearfix">
                <input type="button" value="7">
                <input type="button" value="8">
                <input type="button" value="9">
                <input type="button" value="4">
                <input type="button" value="5">
                <input type="button" value="6">
                <input type="button" value="1">
                <input type="button" value="2">
                <input type="button" value="3">
                <input class="zero" type="button" value="0">
                <input type="button" value=".">
            </div>
        </div>
        <div id="math" class="fr math">
            <input type="button" value="/" onclick="onclicknum('/')">
            <input type="button" value="＊" onclick="onclicknum('*')">
            <input type="button" value="＋" onclick="onclicknum('+')">
            <input type="button" value="－" onclick="onclicknum('-')">
        </div>
        <input id="res" type="button" value="＝">
    </div>
</div>
</body>
</html>

Next is the css style code:

* {
    margin: 0px;
    padding: 0px;
}

.clearfix:before, .clearfix:after {
    content: '';
    display: block;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    _zoom: 1;
}

input {
    display: block;
}

.container {
    width: 240px;
    height: 400px;
    border: 2px solid #eb4509;
    margin: 100px auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

input {
    width: 60px;
    height: 60px;
    border: 1px solid #000;
    float: left;
    background: #ddd;
    font-size: 24px;
    color: #eb4509;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.math input {
    float: none;
}

input.zero {
    width: 120px;
}

#num {
    width: 180px;
}

#cal #math {
    width: 60px;
}

.result {
    width: 100%;
    height: 100px;
    line-height: 100px;
    border: none;
    background-color: #dfdfdf;
    font-size: 30px;
    float: none;
    outline: none;
    text-align: right;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Finally, the js code:

<script type="text/javascript">
    var numresult;
    var str;

    var flag;
    var bot = document.getElementById("bonttom");
    var botInputs = bot.getElementsByTagName("input");
    var clear = document.getElementById("clear");
    var res = document.getElementById("res");
    var math = document.getElementById("math");
    var mathInputs = math.getElementsByTagName("input");
    var antonymsBtn = document.getElementById("antonyms");
    var remainderBtn = document.getElementById("remainder");


    //Click on numbers and add, subtract, multiply and divide imporIn(botInputs);
// imporIn(mathInputs);

    function imporIn(eles) {
        for (var i = 0; i < eles.length; i++) {
            eles[i].onclick = function () {
                onclicknum(this.value);
            }
        }
    }

    //Click to clear the c button clear.onclick = function () {
        onclickclear();
    }

    //Click the = sign to get the result res.onclick = function () {
        onclickresult();
    }

    //Click +/-
    antonymsBtn.onclick = function () {
        antonyms();
    }

    //Click %
    remainderBtn.onclick = function () {
        remainder();
    }

    function onclicknum(nums) {
        if (flag) {
            console.log("num=" + nums);
            if (nums !== "/" && nums !== "+" && nums !== "-" && nums !== "*") {
                str.value = "";

                console.log("aa" + nums);
            }
        }
        flag = false;
        str = document.getElementById("result");
        str.value = str.value + nums;
    }

    //Clear function onclickclear() {
        str = document.getElementById("result");
        str.value = "";
    }

    //Get the result function onclickresult() {
        str = document.getElementById("result");
        numresult = eval(str.value);
        str.value = numresult;
        flag = true;
    }

    //Positive and negative numbers function antonyms() {
        str = document.getElementById("result");
        str.value = -str.value;
    }

    //%
    function remainder() {
        str = document.getElementById("result");
        str.value = str.value / 100;
    }
</script>

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:

Implementing a simple age calculator based on HTML+JS
Implementing a web calculator with native JavaScript
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
JavaScript Example - Implementing a Calculator

<<: How to solve the problem of installing VMware tools under VMware and the installation file not appearing

>>: Summary of MySql index, lock, and transaction knowledge points