2024年1月流感情況百度網(wǎng)站怎么優(yōu)化排名
文章目錄
- 一、前言
- 二、技術(shù)棧
- 三、功能實現(xiàn)
- 3.1 引入樣式
- 3.2 編寫顯示頁面
- 3.2 美化計算器頁面
- 3.3 實現(xiàn)計算器邏輯
- 四、總結(jié)
一、前言
計算器是我們?nèi)粘Ｉ钪薪?jīng)常使用的工具之一，可以幫助我們進行簡單的數(shù)學(xué)運算。在本博文中，我將使用JavaScript編寫一個漂亮的計算器，并添加加減乘除功能。這個計算器將有一個精美的用戶界面，包含9個數(shù)字按鈕和加減乘除操作符。
二、技術(shù)棧
- HTML：負責(zé)構(gòu)建界面
- CSS：負責(zé)美化界面
- JavaScript：負責(zé)實現(xiàn)計算器的邏輯
三、功能實現(xiàn)
3.1 引入樣式
在開始編寫代碼之前，我們需要準備一些資源，包括一些圖標和字體庫。我們可以在網(wǎng)上找到一些開源的資源來使用。在這里，我使用了FontAwesome圖標庫和Google Fonts字體庫。
首先，在HTML文件中引入FontAwesome圖標庫和Google Fonts字體庫的鏈接：
<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-mvHonSS8g/k1XO4z16sWsZUfrVjPDWcTYTLnm79aJMdN5rSTQhq2ShsVlCHJfFMZML3eCG6v8kHouUqimtCM/A==" crossorigin="anonymous" referrerpolicy="no-referrer" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
</head>
3.2 編寫顯示頁面
然后，創(chuàng)建一個div元素作為計算器的容器，并在其中添加所需的HTML元素：
<div class="calculator"><input type="text" id="result" readonly /><div class="row"><button class="number">7</button><button class="number">8</button><button class="number">9</button><button class="operator"><i class="fas fa-divide"></i></button></div><div class="row"><button class="number">4</button><button class="number">5</button><button class="number">6</button><button class="operator"><i class="fas fa-times"></i></button></div><div class="row"><button class="number">1</button><button class="number">2</button><button class="number">3</button><button class="operator"><i class="fas fa-minus"></i></button></div><div class="row"><button class="number">0</button><button class="operator"><i class="fas fa-plus"></i></button></div><div class="row"><button id="clear">C</button><button id="equal">=</button></div>
</div>
頁面效果如圖
3.2 美化計算器頁面
接下來，使用CSS來美化我們的計算器界面：
.calculator {width: 200px;background-color: #f0f0f0;padding: 10px;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);font-family: 'Roboto', sans-serif;
}input[type="text"] {width: 100%;height: 40px;margin-bottom: 15px;padding: 10px;font-size: 20px;text-align: right;
}.row {display: flex;justify-content: space-between;margin-bottom: 10px;
}button {width: 45px;height: 45px;font-size: 16px;border: none;border-radius: 5px;cursor: pointer;
}.number {background-color: #e0e0e0;color: #333;
}.operator {background-color: #ff9800;color: white;
}
現(xiàn)在，我們已經(jīng)完成了計算器的界面。接下來，我們將使用JavaScript來實現(xiàn)計算器的邏輯。
3.3 實現(xiàn)計算器邏輯
首先，我們需要獲取HTML元素的引用，并設(shè)置一些狀態(tài)變量：
// 獲取HTML元素的引用
const resultInput = document.getElementById("result");
const numberButtons = document.getElementsByClassName("number");
const operatorButtons = document.getElementsByClassName("operator");
const clearButton = document.getElementById("clear");
const equalButton = document.getElementById("equal");// 設(shè)置狀態(tài)變量
let currentNumber = "";
let firstNumber = "";
let operator = "";
然后，我們需要分別為數(shù)字按鈕、操作符按鈕和清除按鈕添加事件監(jiān)聽器，以便在點擊時執(zhí)行相應(yīng)的操作：
// 為數(shù)字按鈕添加事件監(jiān)聽器
for (let i = 0; i < numberButtons.length; i++) {numberButtons[i].addEventListener("click", function () {if (operator === "") {firstNumber += this.innerText;resultInput.value = firstNumber;} else {currentNumber += this.innerText;resultInput.value = currentNumber;}});
}// 為操作符按鈕添加事件監(jiān)聽器
for (let i = 0; i < operatorButtons.length; i++) {operatorButtons[i].addEventListener("click", function () {operator = this.innerText;resultInput.value = operator;});
}// 為清除按鈕添加事件監(jiān)聽器
clearButton.addEventListener("click", function () {currentNumber = "";firstNumber = "";operator = "";resultInput.value = "";
});
最后，我們需要為等號按鈕添加事件監(jiān)聽器，以便在點擊時執(zhí)行相應(yīng)的計算操作：
// 為等號按鈕添加事件監(jiān)聽器
equalButton.addEventListener("click", function () {let result;switch (operator) {case "+":result = parseFloat(firstNumber) + parseFloat(currentNumber);break;case "-":result = parseFloat(firstNumber) - parseFloat(currentNumber);break;case "*":result = parseFloat(firstNumber) * parseFloat(currentNumber);break;case "/":result = parseFloat(firstNumber) / parseFloat(currentNumber);break;default:result = "";}// 更新狀態(tài)變量currentNumber = result.toString();firstNumber = "";operator = "";resultInput.value = result;
});
四、總結(jié)
好了，本文的內(nèi)容就分享到這里。 希望你在使用這個精美計算器的過程中有所收獲，它不僅能幫助你進行基本的數(shù)學(xué)運算，還能為你提供一個愉快的使用體驗。如果你對編程感興趣，也歡迎自行擴展功能，讓這個計算器變得更加強大。