使用Javascript制作计算器

制作一个简单的计算器涉及HTML结构、CSS样式和JavaScript逻辑。下面是一个完整的示例，包括每个部分的详细说明。

HTML

首先，创建计算器的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="calculator-screen" value="" disabled />
        <div class="calculator-keys">
            <button type="button" class="operator" value="+">+</button>
            <button type="button" class="operator" value="-">-</button>
            <button type="button" class="operator" value="*">&times;</button>
            <button type="button" class="operator" value="/">&divide;</button>

            <button type="button" value="7">7</button>
            <button type="button" value="8">8</button>
            <button type="button" value="9">9</button>

            <button type="button" value="4">4</button>
            <button type="button" value="5">5</button>
            <button type="button" value="6">6</button>

            <button type="button" value="1">1</button>
            <button type="button" value="2">2</button>
            <button type="button" value="3">3</button>

            <button type="button" value="0">0</button>
            <button type="button" class="decimal" value=".">.</button>
            <button type="button" class="all-clear" value="all-clear">AC</button>

            <button type="button" class="equal-sign" value="=">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

为计算器添加样式，使其外观更美观：

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.calculator {
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    padding: 20px;
    background-color: #fff;
}

.calculator-screen {
    width: 100%;
    height: 40px;
    border: none;
    background-color: #252525;
    color: white;
    text-align: right;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 24px;
    border-radius: 5px;
    margin-bottom: 10px;
}

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

button {
    height: 40px;
    border-radius: 5px;
    border: none;
    background-color: #e0e0e0;
    font-size: 18px;
    color: black;
    cursor: pointer;
    outline: none;
}

button:hover {
    background-color: #d4d4d4;
}

button.operator {
    background-color: #f9a825;
    color: white;
}

button.equal-sign {
    background-color: #ff7043;
    color: white;
    grid-column: span 4;
}

button.all-clear {
    background-color: #f44336;
    color: white;
}

button.decimal {
    background-color: #607d8b;
    color: white;
}

JavaScript

编写JavaScript逻辑来处理计算器的操作：

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const calculator = {
        displayValue: '0',
        firstOperand: null,
        waitingForSecondOperand: false,
        operator: null,
    };

    function updateDisplay() {
        const display = document.querySelector('.calculator-screen');
        display.value = calculator.displayValue;
    }

    updateDisplay();

    const keys = document.querySelector('.calculator-keys');
    keys.addEventListener('click', (event) => {
        const { target } = event;
        const { value } = target;
        if (!target.matches('button')) {
            return;
        }

        switch (value) {
            case '+':
            case '-':
            case '*':
            case '/':
                handleOperator(value);
                break;
            case '=':
                handleEqualSign();
                break;
            case '.':
                inputDecimal(value);
                break;
            case 'all-clear':
                resetCalculator();
                break;
            default:
                if (Number.isInteger(parseFloat(value))) {
                    inputDigit(value);
                }
        }

        updateDisplay();
    });

    function inputDigit(digit) {
        const { displayValue, waitingForSecondOperand } = calculator;

        if (waitingForSecondOperand === true) {
            calculator.displayValue = digit;
            calculator.waitingForSecondOperand = false;
        } else {
            calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
        }
    }

    function inputDecimal(dot) {
        if (calculator.waitingForSecondOperand === true) {
            calculator.displayValue = '0.';
            calculator.waitingForSecondOperand = false;
            return;
        }

        if (!calculator.displayValue.includes(dot)) {
            calculator.displayValue += dot;
        }
    }

    function handleOperator(nextOperator) {
        const { firstOperand, displayValue, operator } = calculator;
        const inputValue = parseFloat(displayValue);

        if (operator && calculator.waitingForSecondOperand) {
            calculator.operator = nextOperator;
            return;
        }

        if (firstOperand == null && !isNaN(inputValue)) {
            calculator.firstOperand = inputValue;
        } else if (operator) {
            const result = performCalculation[operator](firstOperand, inputValue);

            calculator.displayValue = `${parseFloat(result.toFixed(7))}`;
            calculator.firstOperand = result;
        }

        calculator.waitingForSecondOperand = true;
        calculator.operator = nextOperator;
    }

    function handleEqualSign() {
        const { firstOperand, displayValue, operator } = calculator;
        const inputValue = parseFloat(displayValue);

        if (operator && firstOperand != null) {
            const result = performCalculation[operator](firstOperand, inputValue);
            calculator.displayValue = `${parseFloat(result.toFixed(7))}`;
            calculator.firstOperand = null;
            calculator.operator = null;
            calculator.waitingForSecondOperand = false;
        }
    }

    const performCalculation = {
        '/': (firstOperand, secondOperand) => firstOperand / secondOperand,
        '*': (firstOperand, secondOperand) => firstOperand * secondOperand,
        '+': (firstOperand, secondOperand) => firstOperand + secondOperand,
        '-': (firstOperand, secondOperand) => firstOperand - secondOperand,
    };

    function resetCalculator() {
        calculator.displayValue = '0';
        calculator.firstOperand = null;
        calculator.waitingForSecondOperand = false;
        calculator.operator = null;
    }
});

解释

  1. HTML部分：
    • 创建一个包含显示屏和按键的计算器。
    • 使用input元素作为显示屏，设置为只读。
    • 使用button元素创建计算器的各个按键。
  2. CSS部分：
    • 设置页面居中显示。
    • 设置计算器的样式，使其看起来像一个实际的计算器。
    • 为不同类型的按键（数字、操作符、清除、等号）设置不同的样式。
  3. JavaScript部分：
    • 初始化一个calculator对象，包含显示值、操作数、操作符等属性。
    • updateDisplay函数更新计算器的显示屏。
    • 为计算器按键添加点击事件监听器，根据按键的值执行相应的操作。
    • inputDigit函数处理数字输入。
    • inputDecimal函数处理小数点输入。
    • handleOperator函数处理操作符输入，并执行计算。
    • handleEqualSign函数处理等号输入，并显示计算结果。
    • resetCalculator函数重置计算器。

这个示例展示了如何使用HTML、CSS和JavaScript制作一个简单的计算器。

JavaScript

在html页面中使用js变量

上一篇

JavaScript

Javascript什么是闭包（Closure）

下一篇

猜你喜欢