javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS苹果计算器

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

作者:燕穗子博客

这篇文章主要为大家详细介绍了如何利用HTML+CSS+JS实现网页版的苹果计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一、效果截图

二、注意事项

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

2、css样式上

3、js

三、源码实现 

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苹果计算器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文