网页计算器的实现

news2024/10/6 6:01:55

简介

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

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

功能设计和模块划分

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

具体实现

项目结构
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">0</div>
        </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>

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%);
}

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;
    // 1.判断如果点击的是数字，则显示
    if (!isNaN(buttonValue)) {
      // 2.屏幕显示数字是否是0
      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 = "";
    // eval()可以接收一个字符串作为js的代码执行
    newValue = eval(value);
    // Number.isInteger() 判断一个数字是否是整数，如果是则返回true
    if (Number.isInteger(newValue)) {
      return newValue;
    } else {
      // toFixed()保留指定位数的小数
      newValue = newValue.toFixed(2);
      return newValue;
    }
  }
});