欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于HTML+JS實現(xiàn)網(wǎng)頁版蘋果計算器

 更新時間：2022年06月30日 09:39:57   作者：燕穗子博客  
這篇文章主要為大家詳細介紹了如何利用HTML+CSS+JS實現(xiàn)網(wǎng)頁版的蘋果計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、效果截圖

二、注意事項

1、html結(jié)構(gòu)上，分為三個部分：顯示區(qū)、按鈕區(qū)、底部白條

2、css樣式上

  • 需要解決外邊距重疊的問題，可用overflow: hidden;
  • 點擊高亮效果，可用 filter: brightness(160%)

3、js

  • 綁定點擊事件的時候，用事件委托，提高整體性能，如果點擊的不是按鈕，則return（具體看代碼）
  • 用switch···case···處理功能按鈕處理方法
  • flag表示輸入是否輸入首次輸入
  • 轉(zhuǎn)化位百分比的按鈕因為需要涉及到小數(shù),所以要用parseFloat方法來將innerHTML轉(zhuǎn)化為浮點數(shù)再來進行計算
  • eval函數(shù)的使用

三、源碼實現(xiàn) 

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">
      <!-- 顯示區(qū) -->
      <div class="screen">
        <h1>0</h1>
      </div>
      <!-- 按鈕區(qū) -->
      <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;
}
 
/* 設置顯示區(qū) */
.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;
      }
  }
}

到此這篇關(guān)于基于HTML+JS實現(xiàn)網(wǎng)頁版蘋果計算器的文章就介紹到這了,更多相關(guān)JS蘋果計算器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論