js实现简单的计算器

效果图：

html代码：

<table class="tableCal">
            <tr><td colspan="5"><input type="text" id="num"></td></tr>
            <tr>
                <td id="number"><input type="button" value="7" onclick="onclicknum(7)"></td>
                <td id="number"><input type="button" value="8" onclick="onclicknum(8)"></td>
                <td id="number"><input type="button" value="9" onclick="onclicknum(9)"></td>
                <td id="number"><input type="button" value="+" onclick="onclicknum('+')"></td>
            </tr>
            <tr>
                <td id="number"><input type="button" value="4" onclick="onclicknum(4)"></td>
                <td id="number"><input type="button" value="5" onclick="onclicknum(5)"></td>
                <td id="number"><input type="button" value="6" onclick="onclicknum(6)"></td>
                <td id="number"><input type="button" value="-" onclick="onclicknum('-')"></td>
            </tr>
            <tr>
                <td id="number"><input type="button" value="1" onclick="onclicknum(1)"></td>
                <td id="number"><input type="button" value="2" onclick="onclicknum(2)"></td>
                <td id="number"><input type="button" value="3" onclick="onclicknum(3)"></td>
                <td id="number"><input type="button" value="*" onclick="onclicknum('*')"></td>
            </tr>
            <tr>
                <td id="number"><input type="button" value="." onclick="onclicknum('.')"></td>
                <td id="number"><input type="button" value="0" onclick="onclicknum(0)"></td>
                <td id="number"><input type="button" value="Del" onclick="onclickclear()"></td>
                <td id="number"><input type="button" value="/" onclick="onclicknum('/')"></td>
            </tr>
            <tr><td id="number" colspan="4"><input type="button" value="=" onclick="onclickresult()" style="218px;padding:0"></td></tr>
        </table>

js代码：

var str = document.getElementById('num');
        function onclicknum(nums){
            str.value = str.value + nums;
        }
        function onclickclear(){
            str.value = "";
        }
        function onclickresult(){
            str.value = eval(str.value);
        }
           

css代码：

.tableCal{
                text-align: center;
                margin-top:10%;
                margin-left:40%;
            }
            #num{
                 207px;
                height: 30px;
                padding-left:10px;
            }
            #number{
                 50px;
                height: 50px;
                background-color: bisque;
                border: 1px solid blue;
            }
            #number input{
                border: none;
                background-color: bisque;
                50px;
                height: 50px;
            }