简介
该项目实现了一个功能完备、交互友好的网页计算器应用。只使用了 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;
}
}
});
