怎么使用JavaScript仿windows計算器功能

發布時間：2022-07-29 13:44:32 來源：億速云閱讀：172 作者：iii 欄目：開發技術

怎么使用JavaScript仿Windows計算器功能

引言

在現代Web開發中，JavaScript已經成為前端開發的核心技術之一。通過JavaScript，我們可以實現各種復雜的交互功能，甚至可以在瀏覽器中模擬桌面應用程序的功能。本文將詳細介紹如何使用JavaScript來仿制Windows計算器的功能。我們將從項目結構、HTML、CSS到JavaScript邏輯一步步進行講解，最終實現一個功能完整的計算器。

項目結構

在開始編寫代碼之前，我們需要先規劃一下項目的結構。一個簡單的計算器項目通常包括以下幾個部分：

HTML文件：用于定義計算器的界面結構。
CSS文件：用于美化計算器的界面。
JavaScript文件：用于實現計算器的邏輯功能。

我們將分別創建這三個文件，并在HTML文件中引入CSS和JavaScript文件。

HTML結構

首先，我們需要創建一個HTML文件來定義計算器的界面結構。計算器的界面通常包括一個顯示屏和一系列按鈕。我們可以使用HTML的<div>元素來創建這些組件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript計算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div class="display" id="display">0</div>
        <div class="buttons">
            <button class="btn clear" id="clear">C</button>
            <button class="btn backspace" id="backspace">←</button>
            <button class="btn operator" id="divide">÷</button>
            <button class="btn operator" id="multiply">×</button>
            <button class="btn number" id="seven">7</button>
            <button class="btn number" id="eight">8</button>
            <button class="btn number" id="nine">9</button>
            <button class="btn operator" id="subtract">-</button>
            <button class="btn number" id="four">4</button>
            <button class="btn number" id="five">5</button>
            <button class="btn number" id="six">6</button>
            <button class="btn operator" id="add">+</button>
            <button class="btn number" id="one">1</button>
            <button class="btn number" id="two">2</button>
            <button class="btn number" id="three">3</button>
            <button class="btn equals" id="equals">=</button>
            <button class="btn number zero" id="zero">0</button>
            <button class="btn decimal" id="decimal">.</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

在這個HTML結構中，我們創建了一個<div>元素作為計算器的容器，并在其中定義了一個顯示屏和一系列按鈕。每個按鈕都有一個唯一的id，以便在JavaScript中引用。

CSS樣式

接下來，我們需要為計算器添加一些樣式，使其看起來更像Windows計算器。我們可以使用CSS來設置計算器的布局、顏色、字體等。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

.calculator {
    width: 300px;
    background-color: #333;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.display {
    background-color: #222;
    color: #fff;
    font-size: 2.5em;
    text-align: right;
    padding: 20px;
    box-sizing: border-box;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
}

.btn {
    background-color: #444;
    color: #fff;
    border: none;
    font-size: 1.5em;
    padding: 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn:hover {
    background-color: #555;
}

.btn:active {
    background-color: #666;
}

.btn.operator {
    background-color: #ff9500;
}

.btn.operator:hover {
    background-color: #ffaa33;
}

.btn.operator:active {
    background-color: #cc7700;
}

.btn.equals {
    background-color: #ff2d55;
    grid-column: span 2;
}

.btn.equals:hover {
    background-color: #ff4d6a;
}

.btn.equals:active {
    background-color: #cc2244;
}

.btn.clear {
    background-color: #ff3b30;
}

.btn.clear:hover {
    background-color: #ff5c52;
}

.btn.clear:active {
    background-color: #cc3026;
}

.btn.backspace {
    background-color: #ff9500;
}

.btn.backspace:hover {
    background-color: #ffaa33;
}

.btn.backspace:active {
    background-color: #cc7700;
}

.btn.zero {
    grid-column: span 2;
}

在這個CSS文件中，我們為計算器的各個部分設置了樣式。我們使用了grid布局來排列按鈕，并為不同類型的按鈕設置了不同的背景顏色和懸停效果。

JavaScript邏輯

現在，我們已經完成了計算器的界面設計和樣式設置，接下來我們將使用JavaScript來實現計算器的邏輯功能。

初始化變量

首先，我們需要定義一些變量來存儲計算器的狀態。這些變量包括當前顯示的值、上一個操作數、當前運算符等。

let displayValue = '0';
let firstOperand = null;
let secondOperand = null;
let currentOperator = null;
let shouldResetDisplay = false;

displayValue：當前顯示在計算器屏幕上的值。
firstOperand：第一個操作數。
secondOperand：第二個操作數。
currentOperator：當前選擇的運算符。
shouldResetDisplay：一個布爾值，用于指示是否應該在輸入下一個數字時重置顯示屏。

事件監聽

接下來，我們需要為計算器的按鈕添加事件監聽器，以便在用戶點擊按鈕時執行相應的操作。

const display = document.getElementById('display');
const numberButtons = document.querySelectorAll('.number');
const operatorButtons = document.querySelectorAll('.operator');
const clearButton = document.getElementById('clear');
const backspaceButton = document.getElementById('backspace');
const decimalButton = document.getElementById('decimal');
const equalsButton = document.getElementById('equals');

numberButtons.forEach(button => {
    button.addEventListener('click', () => {
        appendNumber(button.textContent);
    });
});

operatorButtons.forEach(button => {
    button.addEventListener('click', () => {
        chooseOperator(button.textContent);
    });
});

clearButton.addEventListener('click', clear);
backspaceButton.addEventListener('click', backspace);
decimalButton.addEventListener('click', appendDecimal);
equalsButton.addEventListener('click', calculate);

在這個代碼片段中，我們為數字按鈕、運算符按鈕、清除按鈕、退格按鈕、小數點按鈕和等號按鈕分別添加了事件監聽器。每個按鈕被點擊時，都會調用相應的函數來處理輸入。

處理數字輸入

當用戶點擊數字按鈕時，我們需要將數字添加到顯示屏上。如果顯示屏上的值是0，或者需要重置顯示屏，我們將直接替換顯示屏上的值。

function appendNumber(number) {
    if (displayValue === '0' || shouldResetDisplay) {
        displayValue = number;
        shouldResetDisplay = false;
    } else {
        displayValue += number;
    }
    updateDisplay();
}

appendNumber函數接收一個數字作為參數，并將其添加到displayValue中。
如果displayValue是0，或者shouldResetDisplay為true，我們將直接替換displayValue。
最后，我們調用updateDisplay函數來更新顯示屏上的值。

處理運算符輸入

當用戶點擊運算符按鈕時，我們需要保存當前的操作數和運算符，并準備接收下一個操作數。

function chooseOperator(operator) {
    if (currentOperator !== null) {
        calculate();
    }
    firstOperand = displayValue;
    currentOperator = operator;
    shouldResetDisplay = true;
}

chooseOperator函數接收一個運算符作為參數。
如果currentOperator不為null，說明之前已經選擇了一個運算符，我們需要先執行計算。
然后，我們將當前顯示的值保存為firstOperand，并更新currentOperator。
最后，我們將shouldResetDisplay設置為true，以便在輸入下一個數字時重置顯示屏。

處理等號操作

當用戶點擊等號按鈕時，我們需要執行計算并顯示結果。

function calculate() {
    if (currentOperator === null || shouldResetDisplay) {
        return;
    }
    secondOperand = displayValue;
    displayValue = operate(firstOperand, secondOperand, currentOperator);
    updateDisplay();
    currentOperator = null;
}

calculate函數首先檢查currentOperator是否為null，或者是否需要重置顯示屏。如果是，則直接返回。
然后，我們將當前顯示的值保存為secondOperand，并調用operate函數執行計算。
計算完成后，我們將結果顯示在顯示屏上，并將currentOperator重置為null。

處理清除操作

當用戶點擊清除按鈕時，我們需要重置計算器的所有狀態。

function clear() {
    displayValue = '0';
    firstOperand = null;
    secondOperand = null;
    currentOperator = null;
    shouldResetDisplay = false;
    updateDisplay();
}

clear函數將所有變量重置為初始狀態，并更新顯示屏。

處理小數點輸入

當用戶點擊小數點按鈕時，我們需要將小數點添加到當前顯示的值中。如果當前值已經包含小數點，則不進行任何操作。

function appendDecimal() {
    if (shouldResetDisplay) {
        displayValue = '0.';
        shouldResetDisplay = false;
    } else if (!displayValue.includes('.')) {
        displayValue += '.';
    }
    updateDisplay();
}

appendDecimal函數首先檢查是否需要重置顯示屏。如果是，則將displayValue設置為'0.'。
如果當前值不包含小數點，則將小數點添加到displayValue中。
最后，我們調用updateDisplay函數來更新顯示屏。

處理退格操作

當用戶點擊退格按鈕時，我們需要刪除當前顯示值的最后一個字符。如果刪除后顯示值為空，則將其設置為0。

function backspace() {
    if (displayValue.length === 1) {
        displayValue = '0';
    } else {
        displayValue = displayValue.slice(0, -1);
    }
    updateDisplay();
}

backspace函數首先檢查displayValue的長度。如果長度為1，則將其設置為'0'。
否則，我們使用slice方法刪除最后一個字符，并更新displayValue。
最后，我們調用updateDisplay函數來更新顯示屏。

更新顯示屏

為了方便起見，我們定義一個updateDisplay函數來更新顯示屏上的值。

function updateDisplay() {
    display.textContent = displayValue;
}

updateDisplay函數將displayValue的值設置為顯示屏的文本內容。

執行計算

最后，我們需要定義一個operate函數來執行實際的數學運算。

function operate(a, b, operator) {
    a = parseFloat(a);
    b = parseFloat(b);
    switch (operator) {
        case '+':
            return a + b;
        case '-':
            return a - b;
        case '×':
            return a * b;
        case '÷':
            return a / b;
        default:
            return b;
    }
}

operate函數接收兩個操作數和一個運算符作為參數，并根據運算符執行相應的數學運算。
我們使用parseFloat將字符串轉換為浮點數，然后使用switch語句根據運算符執行相應的操作。
如果運算符不匹配任何已知的運算符，則返回第二個操作數。

完整代碼

以下是完整的HTML、CSS和JavaScript代碼：

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript計算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div class="display" id="display">0</div>
        <div class="buttons">
            <button class="btn clear" id="clear">C</button>
            <button class="btn backspace" id="backspace">←</button>
            <button class="btn operator" id="divide">÷</button>
            <button class="btn operator" id="multiply">×</button>
            <button class="btn number" id="seven">7</button>
            <button class="btn number" id="eight">8</button>
            <button class="btn number" id="nine">9</button>
            <button class="btn operator" id="subtract">-</button>
            <button class="btn number" id="four">4</button>
            <button class="btn number" id="five">5</button>
            <button class="btn number" id="six">6</button>
            <button class="btn operator" id="add">+</button>
            <button class="btn number" id="one">1</button>
            <button class="btn number" id="two">2</button>
            <button class="btn number" id="three">3</button>
            <button class="btn equals" id="equals">=</button>
            <button class="btn number zero" id="zero">0</button>
            <button class="btn decimal" id="decimal">.</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

.calculator {
    width: 300px;
    background-color: #333;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.display {
    background-color: #222;
    color: #fff;
    font-size: 2.5em;
    text-align: right;
    padding: 20px;
    box-sizing: border-box;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
}

.btn {
    background-color: #444;
    color: #fff;
    border: none;
    font-size: 1.5em;
    padding: 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn:hover {
    background-color: #555;
}

.btn:active {
    background-color: #666;
}

.btn.operator {
    background-color: #ff9500;
}

.btn.operator:hover {
    background-color: #ffaa33;
}

.btn.operator:active {
    background-color: #cc7700;
}

.btn.equals {
    background-color: #ff2d55;
    grid-column: span 2;
}

.btn.equals:hover {
    background-color: #ff4d6a;
}

.btn.equals:active {
    background-color: #cc2244;
}

.btn.clear {
    background-color: #ff3b30;
}

.btn.clear:hover {
    background-color: #ff5c52;
}

.btn.clear:active {
    background-color: #cc3026;
}

.btn.backspace {
    background-color: #ff9500;
}

.btn.backspace:hover {
    background-color: #ffaa33;
}

.btn.backspace:active {
    background-color: #cc7700;
}

.btn.zero {
    grid-column: span 2;
}

JavaScript

”`javascript let displayValue = ‘0’; let firstOperand = null; let secondOperand = null; let currentOperator = null; let shouldResetDisplay = false;

const display = document.getElementById(‘display’); const numberButtons = document.querySelectorAll(‘.number’); const operatorButtons = document.querySelectorAll(‘.operator’); const clearButton = document.getElementById(‘clear’); const backspaceButton = document.getElementById(‘backspace’); const decimalButton = document.getElementById(‘decimal’); const equalsButton = document.getElementById(‘equals’);

numberButtons.forEach(button => { button.addEventListener(‘click’, () => { appendNumber(button.textContent); }); });

operatorButtons.forEach(button => { button.addEventListener(‘click’, () => { chooseOperator(button.textContent); }); });

clearButton.addEventListener(‘click’, clear); backspaceButton.addEventListener(‘click’, backspace); decimalButton.addEventListener(‘click’, appendDecimal); equalsButton.addEventListener(‘click’, calculate);

function appendNumber(number) { if (displayValue === ‘0’ || shouldResetDisplay) { displayValue = number; shouldResetDisplay = false; } else { displayValue += number; } updateDisplay(); }

function chooseOperator(operator) { if (currentOperator !== null) { calculate(); } firstOperand = displayValue; currentOperator = operator; shouldResetDisplay = true

向AI問一下細節

怎么使用JavaScript仿windows計算器功能

怎么使用JavaScript仿Windows計算器功能

目錄

引言

項目結構

HTML結構

CSS樣式

JavaScript邏輯

初始化變量

事件監聽

處理數字輸入

處理運算符輸入

處理等號操作

處理清除操作

處理小數點輸入

處理退格操作

更新顯示屏

執行計算

完整代碼

HTML

CSS

JavaScript

猜你喜歡

怎么使用JavaScript仿windows計算器功能

怎么使用JavaScript仿Windows計算器功能

目錄

引言

項目結構

HTML結構

CSS樣式

JavaScript邏輯

初始化變量

事件監聽

處理數字輸入

處理運算符輸入

處理等號操作

處理清除操作

處理小數點輸入

處理退格操作

更新顯示屏

執行計算

完整代碼

HTML

CSS

JavaScript

猜你喜歡

最新資訊

相關推薦

相關標簽