JS苹果计算器

时间:2022-09-08 燕穗子博客人气:0

一、效果截图

二、注意事项

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

2、css样式上

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

3、js

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

三、源码实现

1、html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计算器案例</title>
    <link rel="stylesheet" href="./index.css" rel="external nofollow"  />
  </head>
  <body>
    <div id="calculator">
      <!-- 显示区 -->
      <div class="screen">
        <h1>0</h1>
      </div>
      <!-- 按钮区 -->
      <div class="buttons">
        <button class="btn btn1" data-type="handel">AC</button>
        <button class="btn btn1" data-type="handel">+/-</button>
        <button class="btn btn1" data-type="handel">%</button>
        <button class="btn btn2" data-type="handel">÷</button>
 
        <button class="btn btn3">7</button>
        <button class="btn btn3">8</button>
        <button class="btn btn3">9</button>
        <button class="btn btn2" data-type="handel">×</button>
 
        <button class="btn btn3">4</button>
        <button class="btn btn3">5</button>
        <button class="btn btn3">6</button>
        <button class="btn btn2" data-type="handel">-</button>
 
        <button class="btn btn3">1</button>
        <button class="btn btn3">2</button>
        <button class="btn btn3">3</button>
        <button class="btn btn2" data-type="handel">+</button>
 
        <button class="btn btn3 btn0">0</button>
        <button class="btn btn3" data-type="handel">.</button>
        <button class="btn btn3" data-type="handel">=</button>
      </div>
      <!-- 底部白条 -->
      <div class="bar"></div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>

2、css

* {
    padding: 0;
    margin: 0;
}
 
/* 设置计算器的整体样式 */
#calculator {
    width: 330px;
    /* height: 590px; */
    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;
      }
  }
}

加载全部内容