html+js做一个简易计算器

效果图：

注： “←”此按钮与“C”按钮相同，均为清空
“%”仅显示，无任何意义也不参与计算（其实是不会写0.0）
界面也很💩，欢迎大家提意见

<meta charset="UTF-8">
<title>计算器</title>
<table border="1" align="center" cellpadding="0" width="180" >

    <tr>
        <td colspan="4" ><input value="" id="xianshi"  type="float" readonly></td>
    </tr>

    <tr>
        <td><button onclick="c()">c</button></td>
        <td><button onclick="chu()">/</button></td>
        <td><button onclick="cheng()">*</button></td>
        <td><button onclick="backspace()">←</button></td>
    </tr>

    <tr>
        <td><button onclick="qi()">7</button></td>
        <td><button onclick="ba()">8</button></td>
        <td><button onclick="jiu()">9</button></td>
        <td><button onclick="jian()">-</button></td>
    </tr>

    <tr>
        <td><button onclick="si()">4</button></td>
        <td><button onclick="wu()">5</button></td>
        <td><button onclick="liu()">6</button></td>
        <td><button onclick="jia()">+</button></td>
    </tr>

    <tr>
        <td><button onclick="yi()">1</button></td>
        <td><button onclick="er()">2</button></td>
        <td><button onclick="san()">3</button></td>
        <td rowspan="2"><button onclick="dengyu()">=</button></td>
    </tr>

    <tr>
        <td><button onclick="baifenhao()">%</button></td>
        <td><button onclick="ling()">0</button></td>
        <td><button onclick="dian()">.</button></td>
    </tr>
</table>

<script>
    var result;
    var jia1 = 0;
    var jian1 = 0;
    var cheng1 = 0;
    var chu1 = 0;

    function dengyu() {
        switch (true){
            case jia1 == 1:
                xianshi.value = parseFloat(result) + parseFloat(xianshi.value);
                break;
            case jian1 == 1:
                xianshi.value = parseFloat(result) - parseFloat(xianshi.value);
                break;
            case cheng1 == 1:
                xianshi.value = parseFloat(result) * parseFloat(xianshi.value);
                break;
            case chu1 == 1:
                xianshi.value = parseFloat(result) / parseFloat(xianshi.value);
                break;

        }
        jia1 = 0;
        jian1 = 0;
        cheng1 = 0;
        chu1 = 0;
    }

    function baifenhao() {
        xianshi.value = xianshi.value + "%"
        baifenhao1 = 1;
    }

    function c() {
        xianshi.value = ""
    }

    function backspace() {
        xianshi.value = ""
    }

    function jia() {
        result = xianshi.value
        xianshi.value = ""
        jia1 = 1;
    }

    function jian() {
        result  = xianshi.value
        xianshi.value = ""
        jian1 = 1;
    }

    function cheng() {
        result = xianshi.value
        xianshi.value = ""
        cheng1 = 1;
    }

    function chu() {
        result = xianshi.value
        xianshi.value = ""
        chu1 = 1;

    }

    function yi() {
        xianshi.value = xianshi.value + 1;
    }

    function er() {
        xianshi.value = xianshi.value + 2;
    }

    function san() {
        xianshi.value = xianshi.value + 3;
    }

    function si() {
        xianshi.value = xianshi.value + 4;
    }

    function wu() {
        xianshi.value = xianshi.value + 5;
    }

    function liu() {
        xianshi.value = xianshi.value + 6;
    }

    function qi() {
        xianshi.value = xianshi.value + 7;
    }

    function ba() {
        xianshi.value = xianshi.value + 8;
    }

    function jiu() {
        xianshi.value = xianshi.value + 9;
    }

    function ling() {
        xianshi.value = xianshi.value + 0;
    }

    function dian() {
        xianshi.value = xianshi.value + ".";
    }

</script>