使用js写个计算器

先上效果图

h5部分代码

 <table>
      <tr>
        <!-- 最上方的屏幕 -->
        <td colspan="4">
          <input type="text" class="screen" />
        </td>
      </tr>
      <tr>
        <td><input type="button" value="1" class="btn" /></td>
        <td><input type="button" value="2" class="btn" /></td>
        <td><input type="button" value="3" class="btn" /></td>
        <td><input type="button" value="+" class="btn" /></td>
      </tr>
      <tr>
        <td><input type="button" value="4" class="btn" /></td>
        <td><input type="button" value="5" class="btn" /></td>
        <td><input type="button" value="6" class="btn" /></td>
        <td><input type="button" value="-" class="btn" /></td>
      </tr>
      <tr>
        <td><input type="button" value="7" class="btn" /></td>
        <td><input type="button" value="8" class="btn" /></td>
        <td><input type="button" value="9" class="btn" /></td>
        <td><input type="button" value="*" class="btn" /></td>
      </tr>
      <tr>
        <td><input type="button" value="0" class="btn" /></td>
        <td colspan="2"><input type="button" value="=" class="btn two" /></td>
        <td><input type="button" value="/" class="btn" /></td>
      </tr>
      <tr>
        <td><input type="button" value="." class="btn" /></td>
        <td colspan="2"><input type="button" value="AC" class="btn two" /></td>
        <td><input type="button" value="<=" class="btn" /></td>
      </tr>
    </table>

js部分代码

 window.onload = function () {
        let btn = document.getElementsByClassName("btn");
        let screen = document.getElementsByClassName("screen")[0];
        for (let i = 0; i < btn.length; i++) {
          btn[i].onclick = function () {
            //  清除
            if (this.value == "AC") {
              screen.value = "";
            } 
            // 回退
            else if (this.value=='<='&&screen.value!='') {
              screen.value=screen.value.substr(0,screen.value.length-1)
            }


            // 等于
            else if (this.value=='='&&screen.value!='') {
              screen.value=eval(screen.value)
            }
            else if (this.value=='='&&screen.value=='') {
              screen.value=''
            }
            
            // 其他键
            else if(screen.value==''&&(
              this.value=='-'||
              this.value=='+'||
              this.value=='*'||
              this.value=='/'

            )){
              screen.value=''
            }else{
              screen.value+=this.value
            }
          };
        }
      };

css代码你们自由发挥吧。

几个关键功能的实现

1.按数字键，数字显示在上方屏幕

  for (let i = 0; i < btn.length; i++) {
          btn[i].onclick = function () {
          
          ...
          
           screen.value+=this.value
          

通过for循环增加点击事件

点击了则屏幕的值等于按键的累加值

2.等于功能

 screen.value=eval(screen.value)

使用eval的特性，让你变成执行语句。

完整代码gitee地址

gitee.com/beizhongjiu…