运用JavaScript函数实现简易计算器功能,获取用户输入文本框的值,使用函数定义对应的加减乘除操作,单击按钮调用函数
时间: 2024-09-28 19:07:16 浏览: 44
要创建一个简单的JavaScript计算器,你可以按照以下步骤进行:
1. 首先,在HTML中设置两个文本框(用于显示数字)和几个按钮(代表加、减、乘、除等操作)。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Calculator</title>
</head>
<body>
<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>
<script src="calculator.js"></script>
</body>
</html>
```
2. 创建一个名为`calculator.js`的外部脚本文件,添加函数定义。这些函数接收两个参数,表示用户的输入值。
```javascript
// JavaScript functions for calculator operations
function add(a, b) {
var sum = parseFloat(a) + parseFloat(b);
updateDisplay(sum);
}
function subtract(a, b) {
var difference = parseFloat(a) - parseFloat(b);
updateDisplay(difference);
}
function multiply(a, b) {
var product = parseFloat(a) * parseFloat(b);
updateDisplay(product);
}
function divide(a, b) {
if (b !== 0) {
var quotient = parseFloat(a) / parseFloat(b);
updateDisplay(quotient);
} else {
alert("Error: Division by zero is not allowed.");
}
}
function clearDisplay() {
document.getElementById("display").value = "";
}
// Function to update the display with the result
function updateDisplay(value) {
document.getElementById("display").value = value;
}
```
在这个例子中,我们定义了四个基本数学运算函数(加、减、乘、除),一个清除显示的清除操作函数,以及一个更新显示结果的通用函数。当用户点击相应按钮时,它们会被调用来执行相应的操作。
阅读全文