网页计算器的实现

简介

该项目实现了一个功能完备、交互友好的网页计算器应用。只使用了 HTML、CSS 和 JavaScript，用于检验 web 前端基础水平。

• 开发环境：Visual Studio Code
• 开发工具：HTML5、CSS3、JavaScript
• 实现效果
  

功能设计和模块划分

1. 显示模块：负责展示输入的数字和计算结果。
2. 输入模块：处理用户点击数字和运算符按钮的操作。
3. 计算模块：执行具体的数学运算，并处理异常情况。

具体实现

1. 项目结构
   
2. index.html

DOCTYPE html>
html lang="en">

head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title> 计算器 title>
    link rel="stylesheet" href="./css/index.css">
    script src="./js/index.js">script>
head>

body>
    div id="outer">
        
        div class="screen">
            div class="showNum">0div>
        div>
        
        div class="buttons">
            input type="button" value="AC" class="btn1">
            input type="button" value="" class="btn1">
            input type="button" value="+/-" class="btn1">
            input type="button" value="/" class="btn2">

            input type="button" value="1">
            input type="button" value="2">
            input type="button" value="3">
            input type="button" value="*" class="btn2">

            input type="button" value="4">
            input type="button" value="5">
            input type="button" value="6">
            input type="button" value="-" class="btn2">


            input type="button" value="7">
            input type="button" value="8">
            input type="button" value="9">
            input type="button" value="+" class="btn2">


            input type="button" value="0">
            input type="button" value=".">
            input type="button" value="m">
            input type="button" value="=" class="btn2">
        div>

    div>

body>

html>

3. index.css

* {
    padding: 0;
    margin: 0;
}

input {
    border: 0;
}


#outer {
    width: 380px;
    height: 640px;
    background-color: black;
    
    margin: 0 auto;
    
    border-radius: 30px;

}


.screen {
    width: 380px;
    height: 180px;
    
    position: relative;
}

.showNum {
    color: white;
    font-size: 60px;
    
    position: absolute;
    right: 30px;
    bottom: 10px;
}


.buttons {
    height: 440px;
    
    padding: 10px;
    
    display: flex;
    
    flex-wrap: wrap;
    
    justify-content: space-between;
    
    align-content: space-between;
}

.buttons>input {
    width: 80px;
    height: 80px;
    background-color: rgb(51, 51, 51);
    
    border-radius: 50%;
    
    color: white;
    
    font-size: 28px;
}

.buttons>.btn1 {
    color: black;
    background-color: rgb(165, 164, 164);
}

.buttons>.btn2 {
    background-color: rgb(213, 158, 90);
}


.buttons>input:active {
    filter: brightness(140%);
}

4. index.js

window.addEventListener("load", function () {
  let showNum = document.querySelector(".showNum");
  
  let buttons = document.querySelector(".buttons");
  
  let flag = false;
  buttons.addEventListener("click", function (e) {
    let buttonValue = e.target.value;
    let showNumValue = showNum.innerHTML;
    
    if (!isNaN(buttonValue)) {
      
      if (showNumValue == 0) {
        showNum.innerHTML = buttonValue;
      } else {
        showNum.innerHTML = showNumValue + buttonValue;
      }
    } else {
      
      switch (buttonValue) {
        case "AC": 
          showNum.innerHTML = 0;
          break;
        case ":
          showNum.innerHTML = delOneFun(showNumValue);
          break;
        case "+/-":
          showNum.innerHTML = showNumValue * -1;
          break;
        case ".":
          showNum.innerHTML = pointFun(showNumValue);
          break;
        case "m":
          location.href = "https://www.baidu.com";
          break;
        default:
          switch (buttonValue) {
            case "/":
            case "*":
            case "-":
            case "+":
              flag = true;
              showNum.innerHTML = showNumValue + buttonValue;
              break;
            case "=":
              showNum.innerHTML = evalFun(showNumValue);
              break;
          }
          break;
      }
    }
  });
  
  function delOneFun(value) {
    let newValue = value.substring(0, value.length - 1);
    if (newValue.length == 0) {
      newValue = 0;
    }
    return newValue;
  }
  
  function pointFun(value) {
    let newValue = "";
    if (value.indexOf(".") == -1) {
      newValue = value + ".";
    } else if (flag) {
      newValue = value + ".";
      flag = false;
    } else {
      return value;
    }

    return newValue;
  }
  
  function evalFun(value) {
    let newValue = "";
    
    newValue = eval(value);
    
    if (Number.isInteger(newValue)) {
      return newValue;
    } else {
      
      newValue = newValue.toFixed(2);
      return newValue;
    }
  }
});