正文

简易计算器编写攻略：只需几行JS代码，轻松实现加减乘除功能！

/0 浏览量
1101

在这个数字时代，计算器已经成为我们日常生活中不可或缺的工具。而对于编程初学者来说，编写一个简易的计算器是一个很好的实践项目，可以加深对JavaScript语言的理解。今天，我们就来一起学习如何用几行JavaScript代码，轻松实现一个具备加减乘除功能的简易计算器。

1. 准备工作

在开始编写代码之前，我们需要准备以下几个要素：

  • HTML结构：定义计算器的布局和样式。
  • CSS样式：美化计算器界面，使其更加友好。
  • JavaScript逻辑：实现计算器的核心功能。

2. HTML结构

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <button onclick="appendValue('1')">1</button>
        <button onclick="appendValue('2')">2</button>
        <button onclick="appendValue('3')">3</button>
        <button onclick="setOperator('+')">+</button>
        <button onclick="appendValue('4')">4</button>
        <button onclick="appendValue('5')">5</button>
        <button onclick="appendValue('6')">6</button>
        <button onclick="setOperator('-')">-</button>
        <button onclick="appendValue('7')">7</button>
        <button onclick="appendValue('8')">8</button>
        <button onclick="appendValue('9')">9</button>
        <button onclick="setOperator('*')">*</button>
        <button onclick="appendValue('0')">0</button>
        <button onclick="calculate()">=</button>
        <button onclick="clearDisplay()">C</button>
        <button onclick="setOperator('/')">/</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. CSS样式

接下来，我们需要为计算器添加一些样式。以下是一个简单的CSS样式示例：

#calculator {
    width: 200px;
    margin: 20px auto;
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#display {
    width: 100%;
    margin-bottom: 10px;
    text-align: right;
    padding: 5px;
    border: 1px solid #ccc;
}

button {
    width: 25%;
    padding: 5px;
    margin: 2px;
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
}

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

4. JavaScript逻辑

最后，我们来编写JavaScript代码，实现计算器的功能。以下是一个简单的JavaScript示例：

let currentNumber = '';
let operator = null;
let previousNumber = '';

function appendValue(value) {
    currentNumber += value;
    updateDisplay();
}

function setOperator(op) {
    if (currentNumber === '') return;
    if (operator !== null) {
        calculate();
    }
    operator = op;
    previousNumber = currentNumber;
    currentNumber = '';
}

function clearDisplay() {
    currentNumber = '';
    operator = null;
    previousNumber = '';
    updateDisplay();
}

function calculate() {
    let result;
    const prev = parseFloat(previousNumber);
    const current = parseFloat(currentNumber);
    if (isNaN(prev) || isNaN(current)) return;
    switch (operator) {
        case '+':
            result = prev + current;
            break;
        case '-':
            result = prev - current;
            break;
        case '*':
            result = prev * current;
            break;
        case '/':
            if (current === 0) {
                alert('Cannot divide by zero');
                return;
            }
            result = prev / current;
            break;
        default:
            return;
    }
    currentNumber = result.toString();
    operator = null;
    previousNumber = '';
    updateDisplay();
}

function updateDisplay() {
    document.getElementById('display').value = currentNumber;
}

通过以上步骤，我们就完成了一个简易计算器的编写。这个计算器可以实现基本的加减乘除运算，并且具备清除显示和设置操作符的功能。当然，这个计算器还有很多可以优化的地方，比如增加更多功能、改进界面设计等。希望这个攻略能帮助你更好地理解JavaScript编程，并在实践中不断进步！

-- 展开阅读全文 --