你可以写一个计算器的html5页面吗
时间: 2024-09-22 19:06:43 浏览: 58
HTML5+JavaScript+CSS3 房贷计算器.rar
当然可以,创建一个简单的HTML5计算器页面的基本步骤如下:
1. **HTML结构**:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
/* 风格和布局 */
.calculator {
width: 200px;
height: 300px;
border: 1px solid #ccc;
padding: 20px;
}
input[type=number], button {
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="number" id="display" disabled>
<button onclick="clearDisplay()">C</button>
<!-- 添加数字、运算符按钮 -->
<!-- ... -->
</div>
<script src="calculator.js"></script>
</body>
</html>
```
2. **JavaScript脚本 (calculator.js)**:
```javascript
// 定义计算函数
function calculate(num1, operator, num2) {
let result;
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
if (num2 !== 0) {
result = num1 / num2;
} else {
alert('除数不能为零');
return;
}
break;
default:
alert('无效的操作符');
return;
}
updateDisplay(result);
}
// 清除显示区
function clearDisplay() {
document.getElementById('display').value = '';
}
// 更新显示区
function updateDisplay(value) {
document.getElementById('display').value += value;
}
```
阅读全文