nodejs网页计算器
时间: 2023-10-24 12:13:26 浏览: 35
好的,我可以给你一些指导来实现一个简单的网页计算器。
首先,你需要创建一个HTML文件并添加一个表单元素,其中包含两个输入框和四个按钮(加、减、乘、除)。然后,在JavaScript中添加事件监听器来处理这些按钮的点击事件,并执行相应的计算。
以下是一个示例代码:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Node.js Calculator</title>
</head>
<body>
<form id="calculator">
<input type="text" id="num1" placeholder="Enter number 1">
<input type="text" id="num2" placeholder="Enter number 2">
<br>
<button id="add">+</button>
<button id="subtract">-</button>
<button id="multiply">*</button>
<button id="divide">/</button>
</form>
<div id="result"></div>
<script src="calculator.js"></script>
</body>
</html>
```
JavaScript:
```javascript
// 获取表单元素和结果显示区域
const form = document.getElementById('calculator');
const result = document.getElementById('result');
// 添加事件监听器
form.addEventListener('submit', (event) => {
event.preventDefault(); // 防止表单提交刷新页面
// 获取输入的数字
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);
// 判断输入是否有效
if (isNaN(num1) || isNaN(num2)) {
result.innerHTML = 'Please enter valid numbers';
return;
}
// 根据点击的按钮执行相应的计算
if (event.target.id === 'add') {
result.innerHTML = num1 + num2;
} else if (event.target.id === 'subtract') {
result.innerHTML = num1 - num2;
} else if (event.target.id === 'multiply') {
result.innerHTML = num1 * num2;
} else if (event.target.id === 'divide') {
if (num2 === 0) {
result.innerHTML = 'Cannot divide by zero';
} else {
result.innerHTML = num1 / num2;
}
}
});
```
这段代码将获取表单元素和结果显示区域,并为表单添加一个事件监听器。当表单提交时,它将获取输入的数字并根据点击的按钮执行相应的计算,最后将结果显示在页面上。
你需要将这些代码保存为一个名为 `calculator.js` 的文件,并在HTML文件中添加一个引用。
希望这可以帮助你开始创建一个简单的网页计算器!