如何制作分:秒倒计时器？代码报错且不显示计时器怎么解决？

首先看你的代码，有几个明显的问题导致了语法错误和计时器不显示的情况：

1. 语法错误：代码不完整 #

你贴的代码最后截断在console.log(mins + ":" + se...，缺少变量名结尾、闭合括号和大括号，这直接触发了"End of Input"的语法错误。

2. 逻辑错误：死循环阻塞线程 #

你在setTimeout里写了while(true)无限死循环，会直接卡住JavaScript线程，后面的setInterval根本没机会执行，计时器自然无法工作。

3. DOM选择与元素存在性问题 #

• 如果engage是按钮的ID，你应该用$('#engage')选择，而非$(engage)（除非engage是提前定义好的DOM变量）。
• 要确保页面上存在clock元素（比如<div id="clock"></div>），否则clock.appendChild(timeDisplay)会报错。

修复后的完整可运行代码 #

下面是修正后的代码，解决了语法、逻辑和DOM操作的问题：

<!-- HTML结构 -->
<button id="engage">开始倒计时</button>
<div id="clock"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // 绑定按钮点击事件
  $('#engage').click(function () {
    // 创建显示倒计时的元素
    var timeDisplay = document.createElement("p");
    var clock = document.getElementById("clock");
    clock.appendChild(timeDisplay);
    
    // 目标时间：50分钟转成秒
    var target = 50 * 60;
    var curr = target;
    
    // 启动每秒更新的定时器
    var countdownTimer = setInterval(function () {
      curr -= 1;
      // 计算分钟和秒数
      var mins = Math.floor(curr / 60);
      var secs = curr % 60;
      // 秒数小于10时补0，保证格式统一
      secs = secs < 10 ? "0" + secs : secs;
      
      // 更新页面显示（替代控制台打印）
      timeDisplay.textContent = `${mins}:${secs}`;
      
      // 倒计时结束时清除定时器并提示
      if (curr <= 0) {
        clearInterval(countdownTimer);
        timeDisplay.textContent = "倒计时结束！";
      }
    }, 1000);
  });
});
</script>

关键改动说明 #

• 移除了阻塞线程的while(true)，改用setInterval每秒更新一次倒计时，这是前端定时器的正确用法。
• 确保curr变量只初始化一次，避免每次回调重置倒计时进度。
• 把控制台打印改成更新DOM文本，让倒计时显示在页面上。
• 增加了倒计时结束的判断，自动清除定时器并给出结束提示。
• 完善了DOM元素选择逻辑，确保操作的元素存在。

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