如何在jQuery中自定义倒计时器并修复负数显示问题

你的倒计时结束后显示负数的原因是：当剩余时间为0分0秒时，代码先将秒数减至-1，随后分钟数被减为-1——虽然此时清除了定时器，但已经执行了HTML更新操作，导致最终显示负数。

同时原代码还存在一个潜在问题：脚本在jQuery加载前执行，会导致$未定义的错误，需要调整脚本顺序。

以下是修复后的完整代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown"></div>
<script>
var timer2 = "1:25"; // 设置目标时长为1分25秒
var interval = setInterval(function() {
  var timer = timer2.split(':');
  var minutes = parseInt(timer[0], 10);
  var seconds = parseInt(timer[1], 10);
  
  // 优先判断是否已到结束状态，直接终止计时并显示00:00
  if (minutes === 0 && seconds === 0) {
    $('.countdown').text('0 minutes 0 seconds');
    clearInterval(interval);
    return;
  }
  
  --seconds;
  // 处理秒数归零后分钟数递减的逻辑
  if (seconds < 0) {
    minutes--;
    seconds = 59;
  }
  // 补零处理
  seconds = seconds < 10 ? '0' + seconds : seconds;
  
  $('.countdown').text(`${minutes} minutes : ${seconds} seconds`);
  timer2 = `${minutes}:${seconds}`;
}, 1000);
</script>

核心修改说明： #

• 新增前置结束判断：在每次计时更新前检查是否已到0分0秒，一旦满足则直接设置结束显示并终止定时器，避免进入负数计算流程
• 调整脚本顺序：将jQuery引入放在自定义脚本之前，避免$未定义错误
• 优化逻辑写法：将三元表达式拆分为更易读的if语句，提升代码可维护性

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