在编程的世界里,JavaScript是一种非常流行的脚本语言,它被广泛应用于网页开发中。编写一个简易的计算器是学习JavaScript的一个很好的起点,因为它可以帮助你理解变量、函数、事件处理以及基本的逻辑控制。下面,我们就来一步步教你如何用JavaScript编写一个简易的计算器。
第一步:规划计算器的功能
在开始编写代码之前,我们需要明确计算器的功能。一个简易的计算器通常可以执行以下操作:
- 加法
- 减法
- 乘法
- 除法
我们可以通过按钮点击来触发这些操作,并将结果显示在页面上。
第二步:创建HTML结构
首先,我们需要创建一个HTML文件,并在其中添加用于显示结果的输入框以及执行操作的按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
</head>
<body>
<input type="text" id="display" disabled>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="setOperation('+')">+</button>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="setOperation('-')">-</button>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="setOperation('*')">*</button>
<button onclick="clearDisplay()">C</button>
<button onclick="appendNumber('0')">0</button>
<button onclick="calculate()">=</button>
<button onclick="setOperation('/')">/</button>
</body>
</html>
第三步:编写JavaScript代码
接下来,我们需要编写JavaScript代码来处理按钮点击事件,并执行相应的计算。
let currentInput = '';
let previousInput = '';
let operation = null;
function appendNumber(number) {
currentInput += number;
updateDisplay();
}
function setOperation(op) {
if (currentInput === '') return;
if (previousInput !== '') calculate();
operation = op;
previousInput = currentInput;
currentInput = '';
}
function clearDisplay() {
currentInput = '';
previousInput = '';
operation = null;
updateDisplay();
}
function calculate() {
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (operation) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
if (current === 0) {
alert('不能除以零');
return;
}
result = prev / current;
break;
default:
return;
}
currentInput = result.toString();
operation = null;
previousInput = '';
updateDisplay();
}
function updateDisplay() {
document.getElementById('display').value = currentInput;
}
第四步:测试和调试
将HTML和JavaScript代码保存到一个文件中,并在浏览器中打开它。点击各个按钮,你应该能看到计算器按照预期工作。如果遇到问题,使用浏览器的开发者工具进行调试。
通过这个简易计算器的编写,你不仅学会了如何使用JavaScript来处理用户输入和执行计算,还了解了如何使用事件处理和变量。这是一个很好的实践,可以帮助你进一步探索JavaScript的更多高级特性。
