快捷導(dǎo)航

使用JavaScript和HTML實(shí)現(xiàn)一個精美的計(jì)算器

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

計(jì)算器是我們?nèi)粘Ｉ钪薪?jīng)常使用的工具之一,可以幫助我們進(jìn)行簡單的數(shù)學(xué)運(yùn)算,在本博文中,我將使用JavaScript編寫一個漂亮的計(jì)算器,并添加加減乘除功能,感興趣的同學(xué)可以自己動手嘗試一下

一、前言

計(jì)算器是我們?nèi)粘Ｉ钪薪?jīng)常使用的工具之一，可以幫助我們進(jìn)行簡單的數(shù)學(xué)運(yùn)算。在本博文中，我將使用JavaScript編寫一個漂亮的計(jì)算器，并添加加減乘除功能。這個計(jì)算器將有一個精美的用戶界面，包含9個數(shù)字按鈕和加減乘除操作符。

二、技術(shù)棧

HTML：負(fù)責(zé)構(gòu)建界面
CSS：負(fù)責(zé)美化界面
JavaScript：負(fù)責(zé)實(shí)現(xiàn)計(jì)算器的邏輯

三、功能實(shí)現(xiàn)

3.1 引入樣式

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

首先，在HTML文件中引入FontAwesome圖標(biāo)庫和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元素作為計(jì)算器的容器，并在其中添加所需的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 美化計(jì)算器頁面

接下來，使用CSS來美化我們的計(jì)算器界面：

.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)完成了計(jì)算器的界面。接下來，我們將使用JavaScript來實(shí)現(xiàn)計(jì)算器的邏輯。

3.4 實(shí)現(xiàn)計(jì)算器邏輯

首先，我們需要獲取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)聽器，以便在點(diǎn)擊時(shí)執(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)聽器，以便在點(diǎn)擊時(shí)執(zhí)行相應(yīng)的計(jì)算操作：

// 為等號按鈕添加事件監(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)容就分享到這里。希望你在使用這個精美計(jì)算器的過程中有所收獲，它不僅能幫助你進(jìn)行基本的數(shù)學(xué)運(yùn)算，還能為你提供一個愉快的使用體驗(yàn)。如果你對編程感興趣，也歡迎自行擴(kuò)展功能，讓這個計(jì)算器變得更加強(qiáng)大。

以上就是使用JavaScript和HTML實(shí)現(xiàn)一個精美的計(jì)算器的詳細(xì)內(nèi)容，更多關(guān)于JavaScript HTML實(shí)現(xiàn)計(jì)算器的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: