正文

如何轻松用JavaScript编写简易计算器，解决日常数学难题

/0 浏览量
1031

在日常生活中，我们经常需要用到计算器来解决各种数学问题。而使用JavaScript编写一个简易计算器，不仅能够让我们在网页上直接使用，还能提升我们的编程技能。下面，我就来一步步教大家如何用JavaScript编写一个简易计算器。

准备工作

在开始编写代码之前，我们需要做一些准备工作：

  1. 创建HTML文件：首先，我们需要创建一个HTML文件，用来搭建计算器的界面。
  2. 引入CSS：为了美化计算器，我们可以引入一些CSS样式。
  3. 编写JavaScript代码：最后，我们需要编写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>简易计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled>
        <button onclick="clearDisplay()">C</button>
        <button onclick="appendNumber('1')">1</button>
        <button onclick="appendNumber('2')">2</button>
        <!-- 添加其他数字和操作符按钮 -->
        <button onclick="calculate()">=</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

接下来，我们需要为计算器添加一些样式。创建一个名为styles.css的文件，并添加以下样式：

.calculator {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    margin: 20px auto;
}

button {
    flex: 1 1 25%;
    padding: 10px;
    margin: 5px;
    font-size: 16px;
    background-color: #f2f2f2;
    border: none;
    cursor: pointer;
}

#display {
    flex: 1 1 100%;
    padding: 10px;
    margin: 5px;
    font-size: 20px;
    text-align: right;
}

JavaScript代码编写

现在，我们来编写JavaScript代码，实现计算器的功能。创建一个名为script.js的文件，并添加以下代码：

let display = document.getElementById('display');
let currentNumber = '';
let previousNumber = '';
let operator = '';

function appendNumber(number) {
    currentNumber += number;
    display.value = currentNumber;
}

function clearDisplay() {
    currentNumber = '';
    previousNumber = '';
    operator = '';
    display.value = '';
}

function calculate() {
    if (operator === '+' || operator === '-' || operator === '*' || operator === '/') {
        if (currentNumber !== '' && previousNumber !== '') {
            let result = '';
            switch (operator) {
                case '+':
                    result = parseFloat(previousNumber) + parseFloat(currentNumber);
                    break;
                case '-':
                    result = parseFloat(previousNumber) - parseFloat(currentNumber);
                    break;
                case '*':
                    result = parseFloat(previousNumber) * parseFloat(currentNumber);
                    break;
                case '/':
                    result = parseFloat(previousNumber) / parseFloat(currentNumber);
                    break;
            }
            display.value = result;
            currentNumber = result.toString();
            previousNumber = '';
            operator = '';
        }
    } else {
        previousNumber = currentNumber;
        currentNumber = '';
        operator = '+';
        display.value = previousNumber + ' + ';
    }
}

测试计算器

完成以上步骤后，打开HTML文件，你将看到一个简易的计算器。现在，你可以输入数字和操作符，然后点击“=”按钮来计算结果。

通过以上步骤，我们成功地用JavaScript编写了一个简易计算器。这个计算器可以解决一些简单的数学问题，但如果你想要实现更复杂的计算功能，可以进一步扩展这个计算器。

-- 展开阅读全文 --