正文

打造简易HTML计算器：使用JavaScript实现基本运算功能

/0 浏览量
1027

在这个数字化时代，计算器已经成为我们日常生活中不可或缺的工具。今天，我将带你一起打造一个简易的HTML计算器，使用JavaScript实现基本的运算功能。让我们一起动手，开启编程之旅吧！

一、HTML结构搭建

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简易HTML计算器</title>
    <style>
        /* 在这里添加CSS样式 */
    </style>
</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="appendValue('+')">+</button>
        <!-- 在这里添加其他按钮 -->
    </div>

    <script>
        // 在这里添加JavaScript代码
    </script>
</body>
</html>

在这个示例中，我们创建了一个名为calculator的容器，并在其中放置了一个文本输入框和一个按钮。文本输入框用于显示计算结果，按钮用于输入数字和运算符。

二、CSS样式美化

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

#calculator {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}

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

button {
    width: 20%;
    padding: 5px;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

在这个样式示例中，我们为计算器容器、显示框和按钮设置了样式。你可以根据自己的喜好进行修改。

三、JavaScript实现基本运算

接下来，我们需要使用JavaScript实现计算器的核心功能——基本运算。以下是一个简单的JavaScript代码示例：

let currentInput = '';
let firstNumber = null;
let secondNumber = null;
let operator = null;

function appendValue(value) {
    if (value === '+' || value === '-' || value === '*' || value === '/') {
        if (currentInput) {
            firstNumber = parseFloat(currentInput);
            operator = value;
            currentInput = '';
        }
    } else {
        currentInput += value;
    }
    updateDisplay();
}

function calculate() {
    if (operator && currentInput) {
        secondNumber = parseFloat(currentInput);
        switch (operator) {
            case '+':
                result = firstNumber + secondNumber;
                break;
            case '-':
                result = firstNumber - secondNumber;
                break;
            case '*':
                result = firstNumber * secondNumber;
                break;
            case '/':
                result = firstNumber / secondNumber;
                break;
            default:
                result = null;
        }
        currentInput = result.toString();
        operator = null;
    }
    updateDisplay();
}

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

在这个代码示例中，我们定义了几个变量来存储当前输入、第一个数字、第二个数字和运算符。appendValue函数用于将数字和运算符添加到当前输入中。calculate函数用于执行计算，并更新显示框中的结果。updateDisplay函数用于更新显示框的值。

四、总结

通过以上步骤，我们已经成功打造了一个简易的HTML计算器。当然，这只是一个基础版本，你还可以根据需求添加更多功能，例如：

  • 支持更多运算符，如^（乘方）、%（取余）等；
  • 添加删除、清除等按钮；
  • 优化样式和交互体验。

希望这篇文章能帮助你入门HTML和JavaScript编程。祝你在编程道路上越走越远！

-- 展开阅读全文 --