在这个示例中,我们将展示如何使用 JavaScript 创建一个简单的计算器。以下是一个简单的 HTML 和 JavaScript 代码示例,用于实现基本的加法、减法、乘法和除法功能。

代码示例

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 计算器</title>
</head>
<body>

<h1>JavaScript 计算器</h1>
<input type="text" id="display" disabled>
<br>
<button onclick="add()">+</button>
<button onclick="subtract()">-</button>
<button onclick="multiply()">*</button>
<button onclick="divide()">/</button>
<button onclick="clearDisplay()">C</button>
<br>
<input type="number" id="number1">
<input type="number" id="number2">
<br>
<button onclick="calculate()">=</button>

<script>
    let currentOperation = null;
    let number1 = 0;
    let number2 = 0;
    let displayValue = 0;

    function add() {
        currentOperation = 'add';
        number1 = parseFloat(document.getElementById('number1').value);
        displayValue = number1;
    }

    function subtract() {
        currentOperation = 'subtract';
        number1 = parseFloat(document.getElementById('number1').value);
        displayValue = number1;
    }

    function multiply() {
        currentOperation = 'multiply';
        number1 = parseFloat(document.getElementById('number1').value);
        displayValue = number1;
    }

    function divide() {
        currentOperation = 'divide';
        number1 = parseFloat(document.getElementById('number1').value);
        displayValue = number1;
    }

    function clearDisplay() {
        displayValue = 0;
        document.getElementById('display').value = '';
    }

    function calculate() {
        number2 = parseFloat(document.getElementById('number2').value);
        if (currentOperation === 'add') {
            displayValue = number1 + number2;
        } else if (currentOperation === 'subtract') {
            displayValue = number1 - number2;
        } else if (currentOperation === 'multiply') {
            displayValue = number1 * number2;
        } else if (currentOperation === 'divide') {
            if (number2 !== 0) {
                displayValue = number1 / number2;
            } else {
                alert('除数不能为0');
                return;
            }
        }
        document.getElementById('display').value = displayValue;
    }
</script>

</body>
</html>

扩展阅读

如果你对 JavaScript 学习感兴趣,可以访问我们网站的 JavaScript 教程 页面,了解更多关于 JavaScript 的知识。

JavaScript_programming_language