正文

孩子也能学会！简单易懂，一学就会的JS计算器教程

/0 浏览量
0830

孩子也能学会！JavaScript（简称JS）作为一种广泛使用的编程语言，不仅适用于复杂的前端开发，也可以用来制作简单的工具，比如计算器。下面，我将用简单易懂的语言，一步步教大家如何用JS制作一个基本的计算器。

准备工作

在开始之前，请确保你的电脑上安装了以下工具：

  • 浏览器：如Chrome、Firefox等。
  • 文本编辑器：如Notepad++、Visual Studio Code等。

第一步：创建HTML结构

首先，我们需要创建一个基本的HTML结构，用于展示计算器的界面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简单JS计算器</title>
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <button onclick="appendNumber('1')">1</button>
        <button onclick="appendNumber('2')">2</button>
        <button onclick="appendNumber('3')">3</button>
        <button onclick="setOperator('+')">+</button>
        <!-- 其他数字和运算符按钮 -->
        <button onclick="calculate()">=</button>
    </div>

    <script src="calculator.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个包含显示区域和按钮的div元素，每个按钮都绑定了一个点击事件，用于向显示区域中添加数字或运算符。

第二步：编写CSS样式

为了让计算器看起来更美观，我们可以添加一些CSS样式。

#calculator {
    width: 200px;
    margin: 0 auto;
    text-align: center;
}

#display {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 16px;
}

button {
    width: 20%;
    padding: 10px;
    font-size: 16px;
    margin: 5px;
}

将这段CSS代码保存为一个.css文件，并在HTML文件的<head>标签中引入。

第三步：编写JavaScript逻辑

接下来，我们需要编写JavaScript代码，实现计算器的功能。

let currentInput = '';
let operator = '';
let firstNumber = 0;

function appendNumber(number) {
    currentInput += number;
    document.getElementById('display').value = currentInput;
}

function setOperator(op) {
    if (currentInput === '') return;
    if (operator !== '') calculate();
    operator = op;
    firstNumber = parseFloat(currentInput);
    currentInput = '';
}

function calculate() {
    const secondNumber = parseFloat(currentInput);
    let result = 0;
    switch (operator) {
        case '+':
            result = firstNumber + secondNumber;
            break;
        case '-':
            result = firstNumber - secondNumber;
            break;
        case '*':
            result = firstNumber * secondNumber;
            break;
        case '/':
            result = firstNumber / secondNumber;
            break;
    }
    currentInput = result.toString();
    operator = '';
    document.getElementById('display').value = currentInput;
}

将这段JavaScript代码保存为一个.js文件，并在HTML文件的<body>标签中引入。

总结

通过以上步骤，我们成功制作了一个简单的JS计算器。这个计算器可以完成基本的加减乘除运算。当然，这只是一个入门级的例子，你可以根据自己的需求对其进行扩展，比如添加更多功能、美化界面等。

希望这个教程能帮助你和孩子轻松入门JavaScript编程！

-- 展开阅读全文 --