如何用if语句修改JavaScript游戏的倒计时变量？

嘿，刚接触JS遇到这种问题太正常啦，我帮你拆解下代码里的几个关键问题：

1. 用错了赋值运算符 #

你这里犯了个新手常踩的坑：用==（比较运算符，用来判断两个值是否相等）给timeRemain赋值，这根本不会改变变量的值！正确的赋值应该用单等号=：

// 错误写法
timeRemain == 5;
// 正确写法
timeRemain = 5;

2. 难度判断只执行了一次 #

你的if语句是在页面加载完成后立刻跑了一遍，但用户是在这之后才会勾选/取消Hard模式的复选框，所以这个判断完全没响应用户的操作。你得在开始倒计时前重新读取复选框的状态，或者给复选框加个监听事件实时更新时间。

3. 倒计时逻辑的小优化 #

你当前的countdown函数每次调用都会创建新的timerId，清理定时器的时候容易出问题。更稳妥的方式是把timerId放在全局作用域，或者改用setInterval来实现倒计时。

修改后的完整代码示例 #

<input type="checkbox" id="cb2" value="yes"> Hard 
<div id="timer"></div>
<button onclick="startCountdown()">开始游戏</button>

<script>
let timeRemain = 10;
let timerId; // 全局存定时器ID，方便后续清理

// 专门读取难度设置的函数
function updateTimeBasedOnDifficulty() {
  const isHardMode = document.getElementById("cb2").checked;
  timeRemain = isHardMode ? 5 : 10;
}

function countdown() {
  if (timeRemain === 0) {
    clearInterval(timerId);
    document.getElementById("timer").innerHTML = "时间到！";
    return;
  }
  timeRemain--;
  document.getElementById("timer").innerHTML = timeRemain + ' seconds left!';
}

// 开始倒计时的入口函数
function startCountdown() {
  // 先清理旧定时器，防止重复点击创建多个倒计时
  if (timerId) {
    clearInterval(timerId);
  }
  // 读取当前难度，更新剩余时间
  updateTimeBasedOnDifficulty();
  // 初始化显示剩余时间
  document.getElementById("timer").innerHTML = timeRemain + ' seconds left!';
  // 启动倒计时
  timerId = setInterval(countdown, 1000);
}
</script>

代码说明 #

• 新增updateTimeBasedOnDifficulty函数，每次开始游戏前都会读取最新的难度设置，确保时间和用户选择匹配。
• 用setInterval替代setTimeout，更适合这种固定间隔重复执行的场景，管理起来也更简单。
• 添加“开始游戏”按钮，让用户选完难度再启动倒计时，避免页面加载时的判断失效。
• 全局存储timerId，每次开始前清理旧定时器，防止多个倒计时同时运行。

这样修改后，勾选Hard模式再点开始游戏，倒计时就会变成5秒啦～

内容的提问来源于stack exchange，提问作者JCS