基于HTML+JS实现网页版苹果计算器

Mathilda ·

更新时间:2024-11-10

· 1170 次阅读

一、效果截图

二、注意事项

三、源码实现

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

<!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;
      }
  }
}

到此这篇关于基于HTML+JS实现网页版苹果计算器的文章就介绍到这了,更多相关JS苹果计算器内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

js实现 HTML 苹果 js

1024 个赞