HTML算术题

以下内容是deepseek帮我写的感谢ai

第一步：先搞一个最简单的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>豆豆算术</title>
</head>
<body>
    <h1>积木算术</h1>
    <!--进度条-->
    <div>1 2 3 4 5 6 7 8 9 10</div>
    <!--积木块算术题-->
    <div>3-2= </div>
    <div>3:1个积木块 1个积木块 1个积木块</div>
    <div>2:1个积木块 1个积木块</div>
    <!--答案-->
    <div>等待答案</div>
    <div>下一题</div>
</body>
</html>

第二步：搞逻辑，当前写死的题目

<!DOCTYPE html>
<html>
<body>
<div>1 2 3 4 5 6 7 8 9 10</div>
<div>3 - 2 = </div>
<div>3: ▢▢▢</div>
<div>2: ▢▢</div>
<input id="answer" type="text" placeholder="输入答案" onkeyup="checkAnswer()">
<div id="result">等待答题...</div>
<button id="nextBtn" disabled onclick="nextQuestion()">下一题</button>

<script>
let currentAnswer = 1;

function checkAnswer() {
  const input = document.getElementById("answer");
  const result = document.getElementById("result");
  const btn = document.getElementById("nextBtn");
  
  if(parseInt(input.value) === currentAnswer) {
    result.textContent = "恭喜你答对了！";
    btn.disabled = false;
  } else if(input.value !== "") {
    result.textContent = "答案错误，再试一下吧";
    btn.disabled = true;
  }
}

function nextQuestion() {
  alert("下一题功能待实现");
}
</script>
</body>
</html>

理解一下逻辑：

首先：

【input ---输入框】

输入框用id=answer 来接收键盘给的值比如1 或者0之类的

输入框的类型是 text

在输入框写的提示语“请输入答案”

onkeyup 是一个事件处理属性，当前是和input 输入框绑定在一起的。

问题？啥时候验证答案的正确与否呢

答案：当用户松开键盘按键的时候

【div 模块】

存结果

【button 按钮】

id=nextBtn 下一道题

默认是不能点击的

事件属性点击

其次重头戏：js部分

赋初值正确答案是1

写一个方法检查答案

用input来接收；const表示不可以重新赋值，接收输入框豆豆写的自己的答案的值比如：0，1，2

用result来获取；const表示不可以重新赋值，答案结果：比如是正确或错误

用btn来获取；const表示不可以重新赋值，来获取下一道题是否展示

判断

如果输入的值和正确答案1 想等则打印恭喜答对了，且btn显示；

否则打印错误，且btn置灰色

方法下一题

暂时等待实现

问题：id=“result” 是设置了一个 result 对象吗，所以后面会用到 result.文本属性被赋值为“恭喜” ？ 3句话解释

答案：

1. **不是创建对象**：id="result"只是给HTML元素设置唯一标识符
2. **获取DOM引用**：getElementById("result")获取的是页面上对应元素的引用
3. **操作DOM属性**：通过这个引用可以修改该元素的各种属性，包括文本内容result.textContent

第三步：引入随机数；答案正确后进入下一道题继续计算

<!DOCTYPE html>
<html>
<body>
<div>1 2 3 4 5 6 7 8 9 10</div>
<div id="question">3 - 2 = 几</div>
<div id="num1">3: ▢▢▢</div>
<div id="num2">2: ▢▢</div>
<input id="answer" type="text" placeholder="输入答案" onkeyup="checkAnswer()">
<div id="result">等待答题...</div>
<button id="nextBtn" disabled onclick="nextQuestion()">下一题</button>

<script>
let correctAnswer;
generateQuestion();

function generateQuestion() {
  const num1 = Math.floor(Math.random() * 5) + 1;
  let num2 = Math.floor(Math.random() * 5) + 1;
  
  // 确保被减数大于等于减数
  if(num1 < num2) [num1, num2] = [num2, num1];
  
  correctAnswer = num1 - num2;
  
  document.getElementById("question").textContent = `${num1} - ${num2} = 几`;
  document.getElementById("num1").textContent = `${num1}: ${"▢".repeat(num1)}`;
  document.getElementById("num2").textContent = `${num2}: ${"▢".repeat(num2)}`;
  
  document.getElementById("answer").value = "";
  document.getElementById("result").textContent = "等待答题...";
  document.getElementById("nextBtn").disabled = true;
}

function checkAnswer() {
  const input = document.getElementById("answer");
  const result = document.getElementById("result");
  const btn = document.getElementById("nextBtn");
  
  if(parseInt(input.value) === correctAnswer) {
    result.textContent = "恭喜你答对了！";
    btn.disabled = false;
  } else if(input.value !== "") {
    result.textContent = "答案错误，再试一下吧";
    btn.disabled = true;
  }
}

function nextQuestion() {
  generateQuestion();
}
</script>
</body>
</html>

在div模块里question 先赋初值算术的数值3-2

在div 里num1赋初值 3：冒号后引入3个小方块

在div 里num2赋初值2：冒号后引入2个小方块

输入框里和上次不变

按钮 nextBtn 里点击后进入下一道题

script里

正确答案赋初值为空

调用下一道题方法

定义方法下一道题

定义一个不能被修改的num1

定义一个可以被修改的num2

num1和num2比大小,保证num1被减数大于num2,

正确的答案=num1-num2

问题，小方块都设置好；注意：

算术问题的样式：

单引号是'，反引号是`，模板字符串必须用反引号

`${num1} - ${num2} = 几`

小方块样式：

${"▢".repeat(3)} 表示3个▢

第四步：增加进度条逻辑

<!DOCTYPE html>
<html>
<body>
<div id="progress">1 2 3 4 5 6 7 8 9 10</div>
<div id="question"></div>
<div id="num1"></div>
<div id="num2"></div>
<input id="answer" placeholder="输入答案" onkeyup="checkAnswer()">
<div id="result">等待答题...</div>
<button id="nextBtn" disabled onclick="nextQuestion()">下一题</button>

<script>
let correctAnswer, current = 0, answered = false;
generateQuestion();

function generateQuestion() {
  let num1 = Math.floor(Math.random() * 5) + 1;
  let num2 = Math.floor(Math.random() * 5) + 1;
  if(num1 < num2) [num1, num2] = [num2, num1];
  correctAnswer = num1 - num2;
  
  document.getElementById("question").textContent = `${num1} - ${num2} = 几`;
  document.getElementById("num1").textContent = `${num1}: ${"▢".repeat(num1)}`;
  document.getElementById("num2").textContent = `${num2}: ${"▢".repeat(num2)}`;
  document.getElementById("answer").value = "";
  document.getElementById("result").textContent = "等待答题...";
  document.getElementById("nextBtn").disabled = true;
  answered = false;
}

function checkAnswer() {
  const input = document.getElementById("answer");
  const result = document.getElementById("result");
  const btn = document.getElementById("nextBtn");
  
  if(input.value === "") return;
  
  if(parseInt(input.value) === correctAnswer) {
    result.textContent = "恭喜答对了！";
    btn.disabled = false;
    answered = true;
  } else {
    result.textContent = "答案错误，再试一次";
    btn.disabled = true;
    answered = false;
  }
}

function nextQuestion() {
  if(!answered) return;
  
  const progress = document.getElementById("progress");
  let numbers = progress.textContent.split(" ");
  numbers[current] = "✓";
  progress.textContent = numbers.join(" ");
  
  current++;
  if(current >= 10) {
    alert("全部完成！");
    return;
  }
  generateQuestion();
}
</script>
</body>
</html>

我脑细胞阵亡了，还是ai比较厉害，写逻辑轻轻松松，我不能继续分析这个代码了，我需要去补一补我的逻辑

posted @ 2026-01-20 10:03 胖豆芽阅读(1) 评论(0) 收藏举报

刷新页面返回顶部

HTML算术题

公告