简易计算器（JavaScript）

在这里插入图片描述
<html>
<meta charset="utf-8">

<head>
    <script>
        // 插入
        function insert(num) {
            document.form.textview.value = document.form.textview.value + num;
        }
        // 计算
        function equal() {
            var temp = document.form.textview.value;
            if (temp) {
                document.form.textview.value = eval(temp);
            }
        }
        // 清除
        function clean() {
            document.form.textview.value = "";
        }
        // 回退
        function back() {
            var temp = document.form.textview.value;
            document.form.textview.value = temp.substring(0, temp.length - 1);
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .button {
            width: 50;
            height: 50;
            font-size: 25;
            margin: 2;
            cursor: pointer;
            background: #a29db370;
            border: none;
            color: white;
        }
        
        .textview {
            width: 218;
            margin: 5;
            font-size: 25;
            padding: 5;
            border: none;
        }
        
        .main {
            border: 5px solid #43d6f5;
            padding: 2;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%)translateY(-50%)
        }
        
        .bg {
            background: linear-gradient(to right, #4e4f8a, #963b35);
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="bg"></div>
    <div class="main">
        <form name="form">
            <input class="textview" name="textview">
        </form>
        <table>
            <tr>
                <td><input class="button" type="button" value="C" onclick="clean()"></td>
                <td><input class="button" type="button" value="<" onclick="back()"></td>
                <td><input class="button" type="button" value="÷" onclick="insert('/')"></td>
                <td><input class="button" type="button" value="x" onclick="insert('*')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
                <td><input class="button" type="button" value="2" onclick="insert(2)"></td>
                <td><input class="button" type="button" value="3" onclick="insert(3)"></td>
                <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="4" onclick="insert(4)"></td>
                <td><input class="button" type="button" value="5" onclick="insert(5)"></td>
                <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
                <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
                <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
                <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
                <td rowspan=5><input class="button" style="height:106" type="button" value="=" onclick="equal()"></td>
            </tr>
            <tr>
                <td colspan=2><input class="button" style="width:106" type="button" value="0" onclick="insert(0)"></td>
                <td><input class="button" type="button" value="." onclick="insert('.')"></td>
            </tr>
        </table>
    </div>
</body>

</html>
简易计算器（JavaScript）

猜你喜欢
