簡介
該項目實現了一個功能完備、交互友好的網頁計算器應用。只使用了 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;}}
});
)
](http://pic.xiahunao.cn/大數據面試題之Presto[Trino](3))
)
