谁又能拒绝一款JS制作的樱花粉色少女猛男通吃系计算器呢？

直接上效果图：

**

css代码：

**

 <style>
        table {
            border: 1px solid #666;
            width: 300px;
            height: 400px;
            margin: auto;
        }
        
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        
        td {
            width: 25%;
            height: 16.67%;
            border: 2px solid rgb(255, 192, 203);
            text-align: center;
            line-height: 16.67%;
        }
        
        .tr-1 td {
            background-color: #fff;
        }
        
        button {
            width: 100%;
            height: 100%;
            font-size: 20px;
            outline: none;
            background-color: rgb(255, 192, 203);
        }
        
        input {
            background-color: rgb(255, 192, 203);
            width: 100%;
            height: 100%;
            font-size: 20px;
            text-align: right;
        }
    </style>

**

HTML部分：

**

<table>
        <tr class="tr-1">
            <td colspan="4">
                <input type="text" name="screenName" id="screenName">
            </td>
        </tr>
        <tr>
            <td>
                <button name="C" value="C" onclick="clearNum()">C</button>
            </td>
            <td>
                <button name="DEL" value="DEL" onclick="tuiGe()">DEL</button>
            </td>
            <td>
                <button id="%" value="%" onclick="jsq(this.id)">%</button>
            </td>
            <td>
                <button id="/" value="/" onclick="jsq(this.id)">/</button>
            </td>
        </tr>
        <tr>
            <td><button id="7" value="7" onclick="jsq(this.id)">7</button></td>
            <td><button id="8" value="8" onclick="jsq(this.id)">8</button></td>
            <td><button id="9" value="9" onclick="jsq(this.id)">9</button></td>

            <td><button id="*" value="*" onclick="jsq(this.id)">*</button></td>

        </tr>
        <tr>
            <td><button id="4" value="4" onclick="jsq(this.id)">4</button></td>

            <td><button id="5" value="5" onclick="jsq(this.id)">5</button></td>

            <td><button id="6" value="6" onclick="jsq(this.id)">6</button></td>

            <td><button id="-" value="-" onclick="jsq(this.id)">-</button></td>

        </tr>
        <tr>
            <td><button id="1" value="1" onclick="jsq(this.id)">1</button></td>

            <td><button id="2" value="2" onclick="jsq(this.id)">2</button></td>

            <td><button id="3" value="3" onclick="jsq(this.id)">3</button></td>

            <td><button id="+" value="+" onclick="jsq(this.id)">+</button></td>

        </tr>
        <tr>
            <td><button id="0" value="0" onclick="jsq(this.id)">0</button></td>

            <td><button id="." value="." onclick="jsq(this.id)">.</button></td>

            <td colspan="2"><button name="=" value="=" onclick="eva()">=</button></td>
        </tr>
    </table>

**

JS部分：

**

<script>
    var num = 0;

    function jsq(num) {
        if (num == "%") {
            document.getElementById('screenName').value = Math.round(document.getElementById('screenName').value) / 100;
        } else {
            document.getElementById('screenName').value += document.getElementById(num).value;
        }
    }

    function tuiGe() {
        var arr = document.getElementById("screenName");
        arr.value = arr.value.substring(0, arr.value.length - 1);
    }

    function eva() {
        document.getElementById("screenName").value = eval(document.getElementById("screenName").value);
    }

    function clearNum() {
        document.getElementById("screenName").value = null;
    }
</script>