目录

一、效果截图

二、注意事项

三、源码实现

1、html

2、css

3、js

一、效果截图

二、注意事项

1、html结构上，分为三个部分：显示区、按钮区、底部白条

2、css样式上

•   需要解决外边距重叠的问题，可用overflow: hidden;
•   点击高亮效果，可用 filter: brightness(160%)

3、js

•   绑定点击事件的时候，用事件委托，提高整体性能，如果点击的不是按钮，则return（具体看代码）
• 用switch···case···处理功能按钮处理方法
• flag表示输入是否输入首次输入
• 转化位百分比的按钮因为需要涉及到小数,所以要用parseFloat方法来将innerHTML转化为浮点数再来进行计算
• eval函数的使用

三、源码实现 

1、html

  
    
    
    
    
    AC
        +/-
        %
        ÷

        7
        8
        9
        ×

        4
        5
        6
        -

        1
        2
        3
        +

        0
        .
        =
      
      
      
    
    
  

2、css

* {
    padding: 0;
    margin: 0;
}


#calculator {
    width: 330px;
    
    background-color: black;
    margin: 30px auto;
    border-radius: 40px;
    
    overflow: hidden;
}


.screen {
    height: 200px;
    width: 100%;
    color: white;
    position: relative;
}

.screen>h1 {
    position: absolute;
    bottom: 10px;
    right: 35px;
    font-size: 42px;
}


.buttons {
    width: 100%;
    padding: 0 10px;
}

.buttons>.btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #333333;
    border: none;
    margin: 10px 6px;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
}


.buttons>.btn:active {
    filter: brightness(160%);
}

.buttons>.btn1 {
    background-color: #ccc;
    color: black;
}

.buttons>.btn2 {
    background-color: #d6b040;
}

.buttons>.btn0 {
    width: 130px;
    border-radius: 26px;
}


.bar {
    width: 110px;
    height: 3px;
    background-color: white;
    border-radius: 1px;
    margin: 20px auto 15px;
}

3、js

const buttons = document.querySelector(".buttons");
const screen = document.querySelector(".screen h1");
var flag = 1; //设置标志性，表示第一次输入
buttons.addEventListener("click", (e) => {
  const text = e.target.innerHTML;
  // 如果点击的不是按钮，则return
  if (e.target.className == "buttons") return;
  handel(text);
});
// 操作符
function handel(text) {
  switch (text) {
    case "AC": //清除
      screen.innerHTML = "0";
      flag = 1;
      break;
    case "+/-": //取正反值
      if (screen.innerHTML[0] == "-") {
        screen.innerHTML = screen.innerHTML.slice(1);
      } else {
        screen.innerHTML = "-" + screen.innerHTML;
      }
      break;
    case "%": //取百分比
      screen.innerHTML = parseFloat(screen.innerHTML) / 100;
      break;
    case "÷": //除法
      if (flag) {
        screen.innerHTML = "/";
        flag = 0;
        break;
      } else {
        screen.innerHTML += "/";
        flag = 0;
        break;
      }
    case "×": //乘法
      if (flag) {
        screen.innerHTML = "*";
        flag = 0;
        break;
      } else {
        screen.innerHTML += "*";
        flag = 0;
        break;
      }
    case "-": //减法
      if (flag) {
        screen.innerHTML = "-";
        flag = 0;
        break;
      } else {
        screen.innerHTML += "-";
        flag = 0;
        break;
      }
    case "+": //加法
      if (flag) {
        screen.innerHTML = "+";
        flag = 0;
        break;
      } else {
        screen.innerHTML += "+";
        flag = 0;
        break;
      }
    case "=": //等于
      if (flag) {
        screen.innerHTML = screen.innerHTML;
        flag = 1;
        break;
      } else {
        screen.innerHTML = eval(screen.innerHTML);
        flag = 1;
        break;
      }
    default:
      if (flag) {
        screen.innerHTML = text;
        flag = 0;
        break;
      } else {
        if (screen.innerHTML.length < 8) {
          screen.innerHTML += text;
        } else {
          return;
        }
        flag = 0;
      }
  }
}