制作一个简单的计算器JavaScript、html、css

	* {
     
            margin: 0;
            padding: 0;
        }
        tbody button{
     
            width: 40px;
            height: 40px;
            border: 0;
            background: pink;
            text-align: center;
            margin-right: 14px;
        }
        tbody td {
     
            float: left;
        }
        thead input{
     
            height: 35px;
            width: 200px;
            
        }
 <div class="box">
        <table>
            <thead>
                <tr>
                    <td colspan="4"><input type="text" id="input_box">td>
                tr>
            thead>
           <tbody>
               
               <tr> 
                   <td><button class="num" id="7" onclick="jsq(this.id)">7button>td>
                   <td><button class="num" id="8" onclick="jsq(this.id)">8button>td>
                   <td><button class="num" id="9" onclick="jsq(this.id)">9button>td>
                   <td><button id="+" onclick="jsq(this.id)">+button>td>
               tr>
               
               <tr>
                <td><button class="num" id="4" onclick="jsq(this.id)">4button>td>
                <td><button class="num" id="5" onclick="jsq(this.id)">5button>td>
                <td><button class="num" id="6" onclick="jsq(this.id)">6button>td>
                <td><button id="-" onclick="jsq(this.id)">-button>td>
               tr>
               
               <tr>
                <td><button class="num" id="1" onclick="jsq(this.id)">1button>td>
                <td><button class="num" id="2" onclick="jsq(this.id)">2button>td>
                <td><button class="num" id="3" onclick="jsq(this.id)">3button>td>
                <td><button id="*" onclick="jsq(this.id)">*button>td>
               tr>
               
               <tr>
                <td><button class="num" id="0" onclick="jsq(this.id)">0button>td>
                <td><button class="num"  onclick="AC()">ACbutton>td>
                <td><button class="num" id="=" onclick="res()">=button>td>
                <td><button id="/" onclick="jsq(this.id)">/button>td>
               tr>
           tbody>
        table>
    div>
    // 获取输入框
        var input_box = document.querySelector('#input_box');
        // console.log(input_box);
        // 获取输入的值
        var num = document.querySelectorAll('.num');
        // 获取计算器输入框数字
        function jsq(num){
     
            input_box.value += num; // 所有按钮调用此函数,让输入框得到每次点击获取值的字符串拼接
        }
        function res(){
     
            input_box.value = eval(input_box.value); // 最后把拼接的字符串通过eval()系统函数计算结果
        }
        function AC(){
     
            input_box.value = ' ';
            // console.log(5);
        }
        ```

你可能感兴趣的:(html,javascript,css)