使用JavaScript和HTML實現一個精美的計算器

更新時間：2023年09月20日 09:26:35 作者：黑夜開發(fā)者

計算器是我們日常生活中經常使用的工具之一,可以幫助我們進行簡單的數學運算,在本博文中,我將使用JavaScript編寫一個漂亮的計算器,并添加加減乘除功能,感興趣的同學可以自己動手嘗試一下

一、前言

計算器是我們日常生活中經常使用的工具之一，可以幫助我們進行簡單的數學運算。在本博文中，我將使用JavaScript編寫一個漂亮的計算器，并添加加減乘除功能。這個計算器將有一個精美的用戶界面，包含9個數字按鈕和加減乘除操作符。

二、技術棧

HTML：負責構建界面
CSS：負責美化界面
JavaScript：負責實現計算器的邏輯

三、功能實現

3.1 引入樣式

在開始編寫代碼之前，我們需要準備一些資源，包括一些圖標和字體庫。我們可以在網上找到一些開源的資源來使用。在這里，我使用了FontAwesome圖標庫和Google Fonts字體庫。

首先，在HTML文件中引入FontAwesome圖標庫和Google Fonts字體庫的鏈接：

<head>
    <link rel="stylesheet"  rel="external nofollow"  integrity="sha512-mvHonSS8g/k1XO4z16sWsZUfrVjPDWcTYTLnm79aJMdN5rSTQhq2ShsVlCHJfFMZML3eCG6v8kHouUqimtCM/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet"  rel="external nofollow"  />
</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.3 美化計算器頁面

接下來，使用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;
}

現在，我們已經完成了計算器的界面。接下來，我們將使用JavaScript來實現計算器的邏輯。

3.4 實現計算器邏輯

首先，我們需要獲取HTML元素的引用，并設置一些狀態(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");
// 設置狀態(tài)變量
let currentNumber = "";
let firstNumber = "";
let operator = "";

然后，我們需要分別為數字按鈕、操作符按鈕和清除按鈕添加事件監(jiān)聽器，以便在點擊時執(zhí)行相應的操作：

// 為數字按鈕添加事件監(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í)行相應的計算操作：

// 為等號按鈕添加事件監(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;
});