正文

教你轻松制作网页版计算器，实现加减乘除功能

/0 浏览量
0415

在这个数字化时代，拥有一个实用的网页版计算器是很多网站的基本需求。它不仅能提高用户体验，还能提供便利的计算服务。下面，我将一步一步地教大家如何制作一个具备加减乘除功能的网页版计算器。

准备工作

在开始之前，你需要准备以下工具：

  • HTML 文件编辑器：例如 Notepad++ 或 Dreamweaver。
  • CSS 文件编辑器：用于美化界面，可以使用同款 HTML 编辑器或专门的 CSS 编辑器。
  • JavaScript 编辑器：用于编写交互逻辑，同样可以使用 HTML 编辑器。

HTML 结构

首先，我们需要搭建计算器的基本框架。

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

这里创建了一个简单的计算器布局，其中包含了数字键、四个基本运算符键、一个清除键和一个等于键。

CSS 样式

接下来，我们给计算器添加一些基本的样式。

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

.calculator button {
    width: 30px;
    height: 30px;
    margin: 2px;
}

#display {
    width: 190px;
    height: 30px;
    margin-bottom: 5px;
    text-align: right;
}

这个简单的 CSS 代码可以让计算器看起来整洁一些。

JavaScript 逻辑

最后，我们需要为计算器添加逻辑功能。下面是一个基础的 JavaScript 代码，用于实现计算器的加、减、乘、除和计算结果的功能。

let currentInput = '';

function append(value) {
    currentInput += value;
    updateDisplay();
}

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

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

function operation(operator) {
    if (currentInput) {
        if (operator === '+') {
            performOperation('+', currentInput);
        } else if (operator === '-') {
            performOperation('-', currentInput);
        } else if (operator === '*') {
            performOperation('*', currentInput);
        } else if (operator === '/') {
            performOperation('/', currentInput);
        }
    }
}

function performOperation(operator, currentInput) {
    if (operator === '+' && currentInput !== '') {
        // 加法操作
        currentInput += ' ' + operator + ' ';
    } else if (operator === '-' && currentInput !== '') {
        // 减法操作
        currentInput += ' ' + operator + ' ';
    } else if (operator === '*' && currentInput !== '') {
        // 乘法操作
        currentInput += ' ' + operator + ' ';
    } else if (operator === '/' && currentInput !== '') {
        // 除法操作
        currentInput += ' ' + operator + ' ';
    }
    updateDisplay();
}

function calculate() {
    if (currentInput) {
        let result = eval(currentInput);
        currentInput = result;
        updateDisplay();
    }
}

这段代码定义了如何将数字和运算符添加到计算器的当前输入中，并能够计算最终的结果。

总结

通过上述步骤，我们创建了一个基础的网页版计算器。这个计算器实现了数字的输入、四种基本运算和最终结果的计算。你可以根据自己的需求进行修改和扩展，例如增加更复杂的数学运算功能，或者美化计算器的样式。希望这篇教程对你有所帮助！

-- 展开阅读全文 --