正文

轻松掌握JS编程：打造个性化简易计算器

/0 浏览量
1113

在这个数字化时代，JavaScript（简称JS）已经成为网页开发中不可或缺的脚本语言。通过学习JS，你可以轻松地给网页添加动态效果，甚至创建一些有趣的应用程序。今天，我们就来一起学习如何用JS编写一个个性化的简易计算器。

一、认识计算器的基本功能

一个简易计算器通常具备以下功能：

  • 四则运算（加、减、乘、除）
  • 清除（C）功能
  • 显示历史记录

二、准备开发环境

在开始编写代码之前，我们需要准备以下开发环境：

  • 任意文本编辑器（如Visual Studio Code、Sublime Text等）
  • 浏览器（如Chrome、Firefox等）

三、创建HTML结构

首先，我们需要创建一个HTML文件，并为其添加一些基本的结构。以下是一个简易计算器的HTML结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <button onclick="press('1')">1</button>
        <button onclick="press('2')">2</button>
        <button onclick="press('+')">+</button>
        <!-- 其他按钮省略 -->
        <button onclick="calculate()">=</button>
        <button onclick="clearDisplay()">C</button>
    </div>

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

四、编写CSS样式

为了让计算器看起来更美观，我们可以为它添加一些CSS样式。以下是一个简单的CSS样式示例：

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

#display {
    width: 100%;
    margin-bottom: 10px;
    height: 40px;
    border: 1px solid #ccc;
    font-size: 20px;
}

button {
    width: 48px;
    height: 40px;
    margin: 2px;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
    font-size: 18px;
    cursor: pointer;
}

五、编写JavaScript代码

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

let currentInput = '';
let previousInput = '';
let operator = '';
let history = [];

function press(num) {
    currentInput += num;
    updateDisplay();
}

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

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

function calculate() {
    if (operator === '' || currentInput === '') {
        return;
    }
    let result;
    switch (operator) {
        case '+':
            result = parseFloat(previousInput) + parseFloat(currentInput);
            break;
        case '-':
            result = parseFloat(previousInput) - parseFloat(currentInput);
            break;
        case '*':
            result = parseFloat(previousInput) * parseFloat(currentInput);
            break;
        case '/':
            result = parseFloat(previousInput) / parseFloat(currentInput);
            break;
        default:
            return;
    }
    history.push(`${previousInput} ${operator} ${currentInput} = ${result}`);
    currentInput = result.toString();
    operator = '';
    updateDisplay();
}

六、测试与优化

完成代码编写后，我们可以在浏览器中打开HTML文件，并测试计算器的功能。如果一切正常，我们可以根据自己的需求进行优化和扩展，例如添加更多功能、美化界面等。

通过以上步骤，你就可以轻松地掌握JS编程，并打造出一个个性化的简易计算器。当然，这只是JS编程的一个入门级示例，希望你能在今后的学习中继续探索和学习，成为一名优秀的开发者。

-- 展开阅读全文 --