用web页面做一个加减乘除的页面
时间: 2023-11-27 22:51:55 浏览: 57
好的,你可以按照以下步骤来创建一个简单的加减乘除的Web页面:
1. 创建一个HTML文件,并添加一个表单元素来包含用户输入的数字和操作符,以及一个按钮来提交表单。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<h1>Calculator</h1>
<form>
<input type="number" name="num1" placeholder="Enter number 1" required>
<select name="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" name="num2" placeholder="Enter number 2" required>
<button type="submit">Calculate</button>
</form>
<div id="result"></div>
</body>
</html>
```
2. 在JavaScript文件中添加代码,以便在用户提交表单时执行计算操作,并将结果显示在页面上。
```javascript
const form = document.querySelector('form');
const resultDiv = document.querySelector('#result');
form.addEventListener('submit', (event) => {
event.preventDefault();
const num1 = Number(event.target.elements.num1.value);
const operator = event.target.elements.operator.value;
const num2 = Number(event.target.elements.num2.value);
let result;
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
default:
result = undefined;
}
resultDiv.textContent = `Result: ${result}`;
});
```
3. 最后,在HTML文件中引入JavaScript文件。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<h1>Calculator</h1>
<form>
<input type="number" name="num1" placeholder="Enter number 1" required>
<select name="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" name="num2" placeholder="Enter number 2" required>
<button type="submit">Calculate</button>
</form>
<div id="result"></div>
<script src="calculator.js"></script>
</body>
</html>
```
现在,你就可以使用这个简单的Web页面来进行加减乘除的计算了。
阅读全文