JavaScript是一种广泛应用于网页和网络应用的编程语言，它在客户端运行，为用户提供动态交互体验。本教程将聚焦于如何利用JavaScript实现一个简单的计算器，具备正负号切换功能。通过学习这个话题，你可以深入理解JavaScript的基本语法、事件处理以及DOM操作。
我们需要创建一个HTML页面作为计算器的用户界面。`calculator.html`文件会包含必要的HTML元素，如按钮和输入框，这些元素将用于构建计算器的外观。例如，我们可以创建一个`<input>`元素作为显示计算结果的屏幕，以及一系列`<button>`元素表示数字、运算符和特殊功能（如清除和正负号切换）。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JavaScript计算器</title>
<style>
/* 添加样式，使计算器看起来更像实际的计算器 */
</style>
</head>
<body>
<input id="display" disabled>
<div id="calculator">
<!-- 在这里添加按钮 -->
</div>
<script src="calculator.js"></script>
</body>
</html>
```
接下来，我们将编写JavaScript代码，这将在`calculator.js`文件中进行。我们需要获取HTML元素并存储在变量中，以便后续操作：
```javascript
const display = document.getElementById('display');
const calculator = document.getElementById('calculator');
```
接着，我们需要为每个按钮添加点击事件监听器，当用户点击按钮时执行相应的操作。这可以通过循环遍历所有按钮并应用`addEventListener`来实现：
```javascript
calculator.querySelectorAll('button').forEach(button => {
button.addEventListener('click', event => {
// 在这里处理按钮点击事件
});
});
```
在点击事件处理函数中，我们根据按钮的值（数字、运算符等）执行不同的操作。例如，如果用户点击的是数字，我们可以将其添加到显示屏幕上；如果是运算符，我们可以保存当前的操作数和运算符；如果是等于号，我们执行计算；如果是正负号，我们改变当前显示的数值的符号：
```javascript
// 假设我们有一个全局变量保存当前的数字和运算符
let currentValue = '';
let operator = null;
// 正负号切换
function toggleSign(value) {
return parseFloat(value) * -1;
}
// 点击数字按钮
function handleNumberClick(number) {
display.value += number;
}
// 点击运算符按钮
function handleOperatorClick(operatorSign) {
operator = operatorSign;
// 保存当前操作数
}
// 点击等号按钮
function handleClickEqual() {
// 进行计算
}
// 点击正负号按钮
function handleClickNegate() {
display.value = toggleSign(display.value);
}
```
为了使计算器能够进行实际的计算，我们需要实现计算逻辑。这通常涉及解析用户输入的表达式，然后使用条件语句和循环来处理优先级和嵌套运算。例如，可以使用`eval`函数（尽管不安全），或者实现自己的解析和计算逻辑：
```javascript
function calculate(expression) {
try {
return eval(expression);
} catch (error) {
alert('无效的计算表达式');
}
}
// 示例：当用户点击等号按钮时
if (operator !== null) {
const expression = currentValue + ' ' + operator + ' ' + display.value;
display.value = calculate(expression);
currentValue = display.value;
operator = null;
}
```
以上就是用JavaScript实现一个简单计算器的基本步骤。这涵盖了DOM操作、事件处理、变量管理和基本计算逻辑。在实际项目中，你可能还需要考虑错误处理、输入验证以及增强用户体验的功能，如连续输入数字而不必每次都点击等号。通过这个实践，你不仅可以提升JavaScript技能，还能更好地理解Web开发中的交互设计。
calculator.zip （1个子文件） 
calculator.html 5KB
