设计网页计算器 网页产生2个随机数,运算符号 用户在答案文本框中输入答案 按下按钮判断,显示正确 提示:随机数产生(Math),获取表单数据,计算、比较 十以内加减乘除练习网站
时间: 2024-11-13 16:19:56 浏览: 28
设计一个网页计算器,可以按照以下步骤进行:
1. **HTML布局**:
创建一个简单的HTML页面结构,包含两个输入框(用于显示随机数),一个下拉菜单选择运算符(如加减乘除),一个文本框(用户输入答案),以及几个按钮(如"="提交答案,"清零"清除输入等)。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
</head>
<body>
<input type="number" id="num1" placeholder="随机数1">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" id="num2" placeholder="随机数2">
<br>
<input type="text" id="answer" readonly>
<button onclick="calculate()">=</button>
<button onclick="clearInputs()">清零</button>
<script src="calculator.js"></script>
</body>
</html>
```
2. **JavaScript函数** (在`calculator.js`文件):
- **生成随机数**:
```javascript
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
```
- **设置初始值和计算**:
```javascript
let num1 = getRandomNumber(0, 10);
let num2 = getRandomNumber(0, 10);
document.getElementById("num1").value = num1;
document.getElementById("num2").value = num2;
function calculate() {
const operator = document.getElementById("operator").value;
const userAnswer = document.getElementById("answer").value;
// 进行计算
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("除数不能为0");
return;
}
break;
}
document.getElementById("answer").value = result;
// 判断并显示正确与否
checkCorrectness(result);
}
```
- **检查答案**:
```javascript
function checkCorrectness(correctResult) {
const calculatedResult = parseFloat(document.getElementById("answer").value);
if(calculatedResult === correctResult) {
alert("恭喜,答案正确!");
} else {
alert("答案错误,请检查!");
}
}
function clearInputs() {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("answer").value = "";
}
```
3. **样式美化** (可选): 你可以添加一些CSS样式让页面看起来更美观,比如字体、颜色、边距等。
阅读全文