大家好，欢迎来到IT知识分享网。
简介
该项目实现了一个功能完备、交互友好的网页计算器应用。只使用了 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; } } }); 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/141664.html
