简介
该项目实现了一个功能完备、交互友好的网页计算器应用。只使用了 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.屏幕显示数字是否是0if (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() 判断一个数字是否是整数，如果是则返回trueif (Number.isInteger(newValue)) {return newValue;} else {// toFixed()保留指定位数的小数newValue = newValue.toFixed(2);return newValue;}}
});
