正文

轻松学会：用JavaScript打造超实用计算器，从基础到进阶技巧全解析

/0 浏览量
0818

前言

计算器，这个看似简单的工具，在我们的日常生活中扮演着不可或缺的角色。而JavaScript，作为前端开发中的常用脚本语言，也可以用来构建功能强大的计算器。本文将带你从基础到进阶，一步步打造一个实用的JavaScript计算器。

一、基础知识

1. HTML结构

首先，我们需要构建计算器的HTML结构。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript计算器</title>
</head>
<body>
    <input type="text" id="display" disabled>
    <button onclick="clearDisplay()">C</button>
    <button onclick="appendValue('1')">1</button>
    <button onclick="appendValue('2')">2</button>
    <!-- 添加更多按钮... -->
    <button onclick="calculate()">=</button>
</body>
</html>

2. CSS样式

为了使计算器更加美观，我们需要添加一些CSS样式：

body {
    font-family: Arial, sans-serif;
    text-align: center;
}

#display {
    width: 300px;
    height: 50px;
    margin-bottom: 10px;
}

button {
    width: 50px;
    height: 50px;
    margin: 2px;
}

3. JavaScript实现

接下来，我们需要编写JavaScript代码来实现计算器的功能。以下是一个简单的实现：

let displayValue = '';

function appendValue(value) {
    displayValue += value;
    document.getElementById('display').value = displayValue;
}

function clearDisplay() {
    displayValue = '';
    document.getElementById('display').value = displayValue;
}

function calculate() {
    try {
        const result = eval(displayValue);
        document.getElementById('display').value = result;
    } catch (e) {
        document.getElementById('display').value = 'Error';
    }
}

二、进阶技巧

1. 使用正则表达式处理输入

为了提高计算器的健壮性，我们可以使用正则表达式来处理用户输入。以下是一个处理乘法和除法的例子：

function appendValue(value) {
    const pattern = /[\d\+\-\*\/]/;
    if (pattern.test(displayValue) && pattern.test(value)) {
        displayValue += ' ';
    }
    displayValue += value;
    document.getElementById('display').value = displayValue;
}

2. 使用事件委托

为了简化代码，我们可以使用事件委托来处理按钮点击事件。以下是一个使用事件委托的例子：

<div id="calculator">
    <input type="text" id="display" disabled>
    <button onclick="handleClick(event)">C</button>
    <button onclick="handleClick(event)">1</button>
    <button onclick="handleClick(event)">2</button>
    <!-- 添加更多按钮... -->
    <button onclick="handleClick(event)">=</button>
</div>

<script>
    const calculator = document.getElementById('calculator');
    calculator.addEventListener('click', function(event) {
        if (event.target.tagName === 'BUTTON') {
            const value = event.target.innerText;
            if (value === 'C') {
                clearDisplay();
            } else {
                appendValue(value);
            }
        }
    });
</script>

3. 使用函数封装

为了提高代码的可读性和可维护性，我们可以将计算器的功能封装成函数。以下是一个使用函数封装的例子：

const calculator = {
    displayValue: '',
    appendValue: function(value) {
        // ...
    },
    clearDisplay: function() {
        this.displayValue = '';
        document.getElementById('display').value = this.displayValue;
    },
    calculate: function() {
        // ...
    }
};

calculator.clearDisplay();

总结

通过本文的学习，相信你已经掌握了使用JavaScript打造实用计算器的方法。在后续的学习中，你可以根据实际需求对计算器进行扩展，例如添加更多功能、优化界面等。祝你在前端开发的道路上越走越远！

-- 展开阅读全文 --