通付盾 网站公司建设,搭建本地网站做色流,网站建设的建议和意见,滁州网站建设推广简介
该项目实现了一个功能完备、交互友好的网页计算器应用。只使用了 HTML、CSS 和 JavaScript #xff0c;用于检验web前端基础水平。
开发环境#xff1a;Visual Studio Code开发工具#xff1a;HTML5、CSS3、JavaScript实现效果
功能设计和模块划分
显示模块#…简介
该项目实现了一个功能完备、交互友好的网页计算器应用。只使用了 HTML、CSS 和 JavaScript 用于检验web前端基础水平。
开发环境Visual Studio Code开发工具HTML5、CSS3、JavaScript实现效果
功能设计和模块划分
显示模块负责展示输入的数字和计算结果。输入模块处理用户点击数字和运算符按钮的操作。计算模块执行具体的数学运算并处理异常情况。
具体实现
项目结构 index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title计算器/titlelink relstylesheet href./css/index.cssscript src./js/index.js/script
/headbodydiv idouter!-- 显示 --div classscreendiv classshowNum0/div/div!-- 按钮 --div classbuttonsinput typebutton valueAC classbtn1input typebutton value- classbtn1input typebutton value/- classbtn1input typebutton value/ classbtn2input typebutton value1input typebutton value2input typebutton value3input typebutton value* classbtn2input typebutton value4input typebutton value5input typebutton value6input typebutton value- classbtn2input typebutton value7input typebutton value8input typebutton value9input typebutton value classbtn2input typebutton value0input typebutton value.input typebutton valueminput typebutton value classbtn2/div/div/body/htmlindex.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;
}.buttonsinput {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);
}/* 设置点击高亮效果 */
.buttonsinput: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;}}
});
