JS新手开发：如何实现用户自定义工作/休息时长的循环倒计时功能

第一步：调整HTML表单（避免点击保存刷新页面） #

原有表单的提交按钮点击后会触发页面刷新，导致倒计时重置，先修改表单代码如下：

<div class="formsss">
  <form action="."> 
    <input type="number" value="1" class="TaskTime"/>Work Minutes
    <input type="number" value="1" class="BreakTime"/>Break Minutes
    <!-- 按钮类型修改为button，避免默认提交刷新行为 -->
    <button type="button" class="submitt">Save</button>
  </form>
</div>
<!-- 确保显示倒计时的元素存在id="demo"，如果没有请补充下面这行代码 -->
<div id="demo"></div>

第二步：替换原有全部JS代码 #

你之前的JS是写死了固定结束时间，直接替换成下面的代码即可，每段逻辑都加了注释方便你理解：

// 存储全局配置和当前运行状态
let workMinutes = 1; // 默认工作时长
let breakMinutes = 1; // 默认休息时长
let isWorking = true; // 标记当前是否处于工作阶段
let timer = null; // 存储定时器ID，方便后续重置

// 给保存按钮绑定点击事件，读取用户输入的时长后启动倒计时
document.querySelector('.submitt').addEventListener('click', function() {
  // 读取输入框的数值，转换为数字类型
  workMinutes = Number(document.querySelector('.TaskTime').value);
  breakMinutes = Number(document.querySelector('.BreakTime').value);
  // 清空之前运行的定时器，避免多个定时器同时运行导致计时错误
  if(timer) clearInterval(timer);
  // 从工作阶段开始启动倒计时
  startCountdown(workMinutes);
})

// 封装通用倒计时函数，入参为需要倒计时的分钟数
function startCountdown(targetMinutes) {
  // 计算倒计时结束时间：当前时间 + 目标分钟数转换的毫秒数
  let countDownDate = new Date().getTime() + targetMinutes * 60 * 1000;
  // 启动每秒更新一次的定时器
  timer = setInterval(function() {
    let now = new Date().getTime();
    let distance = countDownDate - now;

    // 计算剩余分钟、秒数
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // 渲染倒计时到页面
    document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";

    // 倒计时结束的逻辑
    if (distance < 0) {
      // 清空当前定时器
      clearInterval(timer);
      // 切换运行阶段：工作转休息、休息转工作
      isWorking = !isWorking;
      // 启动新阶段的倒计时
      startCountdown(isWorking ? workMinutes : breakMinutes);
    }
  }, 1000);
}

新手适配提示 #

• 建议把JS代码放到HTML文件的</body>标签之前，避免出现找不到页面元素的报错
• 后续你熟练了可以自行扩展输入校验（比如限制用户不能输入负数、非数字内容）、暂停/重置按钮、阶段提示音等功能

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