如何使用JavaScript编写一个简单的网页计算器|极客笔记

如何使用JavaScript编写一个简单的网页计算器

在现代的网页开发中，JavaScript是一种非常常用的脚本语言，可以用于增强网页的交互性和功能性。本文将详细介绍如何使用JavaScript编写一个简单的网页计算器，让用户可以进行简单的数学运算。

1. 创建HTML结构

首先，我们需要创建一个HTML文件来构建网页计算器的基本结构。我们可以使用以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
</head>
<body>
    <h1>Simple Calculator</h1>
    <div>
        <input type="text" id="result" readonly>
    </div>
    <div>
        <button onclick="clearResult()">C</button>
        <button onclick="appendToResult('7')">7</button>
        <button onclick="appendToResult('8')">8</button>
        <button onclick="appendToResult('9')">9</button>
        <button onclick="appendToResult('+')">+</button>
    </div>
    <div>
        <button onclick="appendToResult('4')">4</button>
        <button onclick="appendToResult('5')">5</button>
        <button onclick="appendToResult('6')">6</button>
        <button onclick="appendToResult('-')">-</button>
    </div>
    <div>
        <button onclick="appendToResult('1')">1</button>
        <button onclick="appendToResult('2')">2</button>
        <button onclick="appendToResult('3')">3</button>
        <button onclick="appendToResult('*')">x</button>
    </div>
    <div>
        <button onclick="appendToResult('0')">0</button>
        <button onclick="appendToResult('.')">.</button>
        <button onclick="calculateResult()">=</button>
        <button onclick="appendToResult('/')">÷</button>
    </div>

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

在这个HTML文件中，我们创建了一个简单的网页计算器的结构。有一个显示结果的文本输入框以及操作按钮，用户可以点击按钮输入数字和运算符。

2. 编写JavaScript逻辑

接下来，我们需要编写JavaScript代码来处理用户的输入和计算结果。我们可以将代码保存到calculator.js文件中。以下是代码示例：

let currentResult = '';

function appendToResult(value) {
    currentResult += value;
    document.getElementById('result').value = currentResult;
}

function clearResult() {
    currentResult = '';
    document.getElementById('result').value = currentResult;
}

function calculateResult() {
    try {
        currentResult = eval(currentResult);
        document.getElementById('result').value = currentResult;
    } catch (error) {
        document.getElementById('result').value = 'Error';
    }
}

在这段JavaScript代码中，我们定义了三个函数。appendToResult函数用于将用户点击的按钮的值追加到当前结果中，并更新显示在文本输入框中；clearResult函数用于清空当前结果；calculateResult函数用于计算当前结果的值并显示在文本输入框中。我们通过使用eval函数来计算表达式的值，但要注意eval函数是一个有风险的函数，可能会导致安全问题，所以在实际项目中应该避免使用。