怎么使用JavaScript制作简单网页计算器

发布时间：2022-08-08 17:37:27 作者：iii
来源：亿速云阅读：219

怎么使用JavaScript制作简单网页计算器

在现代网页开发中，JavaScript 是一种不可或缺的编程语言。它不仅可以增强网页的交互性，还可以实现各种动态功能。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 制作一个简单的网页计算器。通过这个项目，你将学习到如何结合这三种技术来创建一个功能齐全的计算器。

1. 项目概述

我们将创建一个简单的四则运算计算器，支持加、减、乘、除操作。计算器的界面将使用 HTML 和 CSS 来构建，而计算逻辑则由 JavaScript 实现。最终的计算器将具备以下功能：

数字输入
运算符选择
计算结果
清除输入
删除最后一个字符

2. 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>简单网页计算器</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" onclick="clearDisplay()">C</button>
            <button class="btn delete" onclick="deleteLast()">DEL</button>
            <button class="btn operator" onclick="appendOperator('/')">/</button>
            <button class="btn operator" onclick="appendOperator('*')">*</button>
            <button class="btn number" onclick="appendNumber('7')">7</button>
            <button class="btn number" onclick="appendNumber('8')">8</button>
            <button class="btn number" onclick="appendNumber('9')">9</button>
            <button class="btn operator" onclick="appendOperator('-')">-</button>
            <button class="btn number" onclick="appendNumber('4')">4</button>
            <button class="btn number" onclick="appendNumber('5')">5</button>
            <button class="btn number" onclick="appendNumber('6')">6</button>
            <button class="btn operator" onclick="appendOperator('+')">+</button>
            <button class="btn number" onclick="appendNumber('1')">1</button>
            <button class="btn number" onclick="appendNumber('2')">2</button>
            <button class="btn number" onclick="appendNumber('3')">3</button>
            <button class="btn equal" onclick="calculate()">=</button>
            <button class="btn number zero" onclick="appendNumber('0')">0</button>
            <button class="btn number" onclick="appendNumber('.')">.</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

在这个 HTML 结构中，我们创建了一个包含显示屏和按钮的计算器。每个按钮都绑定了一个 onclick 事件，用于调用相应的 JavaScript 函数。

3. CSS 样式

接下来，我们需要为计算器添加一些基本的样式，使其看起来更加美观和用户友好。我们将使用 CSS 来设置计算器的布局、颜色和字体。

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

.calculator {
    width: 300px;
    background-color: #333;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

.display {
    width: 100%;
    height: 60px;
    background-color: #222;
    color: #fff;
    font-size: 2.5em;
    text-align: right;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 20px;
}

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

.btn {
    width: 100%;
    height: 60px;
    background-color: #444;
    color: #fff;
    font-size: 1.5em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

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

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

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

.btn.equal {
    background-color: #34c759;
    grid-column: span 2;
}

.btn.equal:hover {
    background-color: #30d158;
}

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

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

.btn.delete {
    background-color: #5856d6;
}

.btn.delete:hover {
    background-color: #6a6aff;
}

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

在这个 CSS 文件中，我们设置了计算器的整体布局、按钮的样式以及不同按钮的颜色。我们还使用了 CSS Grid 来布局按钮，使其排列整齐。

4. JavaScript 逻辑

最后，我们需要编写 JavaScript 代码来实现计算器的功能。我们将定义几个函数来处理数字输入、运算符选择、计算和清除操作。

let display = document.getElementById('display');
let currentInput = '';
let operator = null;
let previousInput = '';

function appendNumber(number) {
    if (currentInput.includes('.') && number === '.') return;
    currentInput += number;
    updateDisplay();
}

function appendOperator(op) {
    if (currentInput === '') return;
    if (previousInput !== '') {
        calculate();
    }
    operator = op;
    previousInput = currentInput;
    currentInput = '';
}

function calculate() {
    if (operator === null || currentInput === '') return;
    let result;
    const prev = parseFloat(previousInput);
    const current = parseFloat(currentInput);
    switch (operator) {
        case '+':
            result = prev + current;
            break;
        case '-':
            result = prev - current;
            break;
        case '*':
            result = prev * current;
            break;
        case '/':
            result = prev / current;
            break;
        default:
            return;
    }
    currentInput = result.toString();
    operator = null;
    previousInput = '';
    updateDisplay();
}

function clearDisplay() {
    currentInput = '';
    operator = null;
    previousInput = '';
    updateDisplay();
}

function deleteLast() {
    currentInput = currentInput.slice(0, -1);
    updateDisplay();
}

function updateDisplay() {
    display.innerText = currentInput || '0';
}

在这个 JavaScript 文件中，我们定义了以下几个函数：

appendNumber(number)：将数字或小数点添加到当前输入中。
appendOperator(op)：设置当前运算符，并保存之前的输入。
calculate()：根据当前运算符和输入执行计算，并更新显示结果。
clearDisplay()：清除所有输入和运算符。
deleteLast()：删除当前输入的最后一个字符。
updateDisplay()：更新显示屏的内容。

5. 测试与调试

完成上述代码后，你可以在浏览器中打开 HTML 文件来测试计算器的功能。确保所有按钮都能正常工作，并且计算结果准确无误。如果遇到问题，可以使用浏览器的开发者工具进行调试。

6. 总结

通过这个项目，我们学习了如何使用 HTML、CSS 和 JavaScript 创建一个简单的网页计算器。我们不仅掌握了基本的网页布局和样式设计，还学会了如何使用 JavaScript 处理用户输入和执行计算逻辑。这个项目为进一步学习更复杂的网页开发技术打下了坚实的基础。

希望这篇文章对你有所帮助，祝你在编程的道路上越走越远！

怎么使用JavaScript制作简单网页计算器

怎么使用JavaScript制作简单网页计算器

1. 项目概述

2. HTML 结构

3. CSS 样式

4. JavaScript 逻辑

5. 测试与调试

6. 总结

相关阅读