JavaScript Calculator

In recent days beginner JavaScript, use it to write a simple calculator

Renderings:

Renderings

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>简易计算器Plus</title>
    <style>
        .bts {
            width: 60px;
            height: 60px;
            border-color: gray;
            border: none;
        }

        .bts:hover {
            background-color: #fff;
        }

        .bts:active {
            background-color: lightblue;
        }

        .bts_c {
            width: 60px;
            height: 60px;
            background-color: #FF6C5C;
            border: none;
        }

        .bts_c:hover {
            background-color: #A3F6FF;
        }

        .bts_c:active {
            background-color: lightblue;
        }

        #content {
            border-radius: 10px 5px;
            padding: 10px;
            text-align: center;
            margin: auto;
            border: 1px solid grey;
            width: 300px;
        }

        table {
            margin: auto;
            border-spacing: 0;
        }

        td {
            padding: 1px;
        }

        .header {
            height: 40px;
        }

        .header input {
            font-size: 20pt;
            width: 240px;
        }

        .title {
            font-size: 20pt;
        }
    </style>
</head>
<script type="text/javascript">
    var result = "";

    function jisuan(num) {

        if (num == "=") {
            document.form_cal.text.value = result + "=" + eval(result);
        } else if (num == "c") {
            location.reload();
        } else {
            result = result + num;
            document.form_cal.text.value = result;
        }
    }
</script>

<body>
    <div id="content">
        <span class="title">简易计算器</span>
        <form action="#" class="form_cal" name="form_cal">
            <div class="header">
                <input type="text" id="text" name="text" readonly="true" />
            </div>

            <table>
                <tr>
                    <td><input class="bts" id="1" type="button" value="1" onClick="jisuan(this.id)" /></td>
                    <td><input class="bts" id="2" type="button" value="2" onClick="jisuan(this.id)" /></td>
                    <td><input class="bts" id="3" type="button" value="3" onClick="jisuan(this.id)" /></td>
                    <td><input class="bts" id="+" type="button" value="+" onClick="jisuan(this.id)" /></td>
                </tr>
                <tr>
                    <td><input class="bts" id="4" type="button" value="4" onClick="jisuan(this.id)" /></td>
                    <td><input class="bts" id="5" type="button" value="5" onClick="jisuan(this.id)" /></td>
                    <td><input class="bts" id="6" type="button" value="6" onClick="jisuan(this.id)" /></td>
                    <td><input class="bts" id="-" type="button" value="-" onClick="jisuan(this.id)" /></td>
                </tr>
                <tr>
                    <td><input class="bts" id="7" type="button" value="7" onClick="jisuan(this.id)" /></td>
                    <td><input class="bts" id="8" type="button" value="8" onClick="jisuan(this.id)" /></td>
                    <td><input class="bts" id="9" type="button" value="9" onClick="jisuan(this.id)" /></td>
                    <td><input class="bts" id="*" type="button" value="*" onClick="jisuan(this.id)" /></td>
                </tr>
                <tr>
                    <td><input class="bts_c" id="c" type="button" value="清屏" onClick="jisuan(this.id)" /></td>
                    <td><input class="bts" id="0" type="button" value="0" onClick="jisuan(this.id)" /></td>
                    <td><input class="bts" id="=" type="button" value="=" onClick="jisuan(this.id)" /></td>
                    <td><input class="bts" id="/" type="button" value="/" onClick="jisuan(this.id)" /></td>
                </tr>
            </table>
        </form>
    </div>
</body>

</html>

Use this calculator to hand in papers, flaws more, but basically has all the basic functions of the calculator, there are achieved within the backspace function, using the "clear screen" function (in fact, point c button to refresh the page O ( ∩_∩) O ~ ha);
in addition, on the calculation of the sentence, a JavaScript which uses a special function: the eval ();
which is explained above W3school:

eval () function computes a string, and executes the JavaScript code;

Popular terms is: This function is used to store and execute an expression, such as a variable stored inside the "3 + 3", then eval () function call it: the eval (a); In this case, the eval (a) the value is 9

JavaScript Calculator

In recent days beginner JavaScript, use it to write a simple calculator

Guess you like