原生JS简易计算器


图片演示:


代码演示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器 - NiceHan</title>
    <style type="text/css">
        * {
            border: 0;
        }

        body {
            background-color: rgba(100, 149, 237, 0.8);
        }

        h1 {
            color: white;
            text-align: center;
            font-family: 'Microsoft YaHei';
            font-size: 56px;
            font-weight: bold;
            text-shadow: 0px 0px 0 rgb(148, 148, 148), 1px 1px 0 rgb(125, 125, 125), 2px 2px 0 rgb(103, 103, 103), 3px 3px 0 rgb(80, 80, 80), 4px 4px 0 rgb(57, 57, 57), 5px 5px 0 rgb(34, 34, 34), 6px 6px 0 rgb(11, 11, 11), 7px 7px 6px rgba(0, 0, 0, 0.75), 7px 7px 1px rgba(0, 0, 0, 0.5), 0px 0px 6px rgba(0, 0, 0, .2);
        }

        input {
            margin: 6px;
            background-color: white;
        }

        .btnstyle {
            background-color: orange;
        }

        input:hover {
            background-color: #C0C0C0;
        }

        input[type=button] {
            height: 36px;
            width: 36px;
        }

        input[type=text] {
            height: 36px;
            width: 190px;
        }
    </style>


    <script type="text/javascript">
        function num(val) {
            switch (val) {
                case "=":
                    document.getElementById('texton').value = eval(document.getElementById('texton').value);
                    break;

                case "AC":
                    document.getElementById('texton').value = "";
                    break;

                default:
                    document.getElementById('texton').value = document.getElementById('texton').value + val;
                    document.getElementById('texton').value = document.getElementById('texton').value;
            }
        }
    </script>
</head>

<body>
    <h1>简单计算器 - NiceHan</h1>

    <div style="width: 208px;margin: auto;background-color: black;">
        <input type="text" name="texton" id="texton" value=""
            style="text-align: center;font-size: 16px;background-color: lightyellow;" />
        <br />
        <input type="button" name="btn1" id="btnac" value="AC" onclick="num(this.value)" style="width: 141px;" />
        <input type="button" name="btn1" id="btn+" value="+" onclick="num(this.value)" class="btnstyle" />
        <br />
        <input type="button" name="btn1" id="btn1" value="1" onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn2" value="2" onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn3" value="3" onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn-" value="-" onclick="num(this.value)" class="btnstyle" />
        <br />
        <input type="button" name="btn1" id="btn4" value="4" onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn5" value="5" onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn6" value="6" onclick="num(this.value)" />
        <input type="button" name="btn1" id="*" value="×" onclick="num(this.id)" class="btnstyle" />
        <br />
        <input type="button" name="btn1" id="btn7" value="7" onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn8" value="8" onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn9" value="9" onclick="num(this.value)" />
        <input type="button" name="btn1" id="/" value="÷" onclick="num(this.id)" class="btnstyle" />
        <br />
        <input type="button" name="btn0" id="btn0" value="0" onclick="num(this.value)" style="width: 90px;" />
        <input type="button" name="btn1" id="btn." value="." onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn=" value="=" onclick="num(this.value)" class="btnstyle" />
    </div>
</body>

</html>

声明:⎛⎝韩小韩博客⎠⎞|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 原生JS简易计算器


离群索居 不是野兽便是神灵