网页多计时器故障：仅新计时器正常，旧计时器无倒计时？

兄弟，你遇到的问题核心原因很明确：重复定义了window.onload函数，而且计时器的初始化逻辑也没和按钮点击联动起来。

具体问题拆解 #

1. window.onload被覆盖：你写了两个window.onload函数，浏览器只会执行最后一个绑定的这个函数，所以10分钟计时器的启动代码startTimer10(...)根本没机会运行，自然只会显示初始的10:00，不会倒计时。
2. 冗余重复的代码：你写了startTimer10和startTimer20两个几乎完全一样的函数，不仅冗余，还容易因为变量命名（比如timer10、timer20）增加混淆风险。
3. 无效的HTML结构：代码里有多个重复的<body>标签，这会导致DOM解析混乱，可能引发其他潜在问题。

修复后的完整代码 #

<body>
  <div id="1Div">
    <h4>Question goes here?</h4>
    <input type="text" id="name1"/>
    <button onclick="myFunction1()" id="button0" class="button3">Enter</button>
  </div>
  <div id="2Div" style="display:none;">
    <h4 id="typeE">How much time do you think you need in minutes?</h4>
    <button onclick="startTimer(60*10, '#time10')" id="button1" class="button3">10 minutes</button>
    <button onclick="startTimer(60*20, '#time20')" id="button2" class="button3">20 minutes</button>
  </div>

  <div id="timer10" style="display:none">
    <center><div><span id="time10">10:00</span></div></center>
  </div>
  <div id="timer20" style="display:none">
    <center><div><span id="time20">20:00</span></div></center>
  </div>

  <script>
    // 切换到时间选择界面
    function myFunction1(){
      document.getElementById("1Div").style.display="none";
      document.getElementById("2Div").style.display="block";
    }

    // 通用计时器函数，支持任意时长和显示元素
    function startTimer(duration, displaySelector) {
      // 先获取显示元素
      const display = document.querySelector(displaySelector);
      // 显示对应的计时器容器
      display.closest('div[id^="timer"]').style.display = 'block';
      // 隐藏时间选择界面
      document.getElementById("2Div").style.display="none";

      let timer = duration;
      // 先清除该元素可能存在的旧定时器，避免多个定时器叠加
      if (display.timerId) {
        clearInterval(display.timerId);
      }

      // 启动新的定时器
      display.timerId = setInterval(function () {
        const minutes = parseInt(timer / 60, 10);
        const seconds = parseInt(timer % 60, 10);
        // 格式化数字为两位
        const formattedMinutes = minutes < 10 ? "0" + minutes : minutes;
        const formattedSeconds = seconds < 10 ? "0" + seconds : seconds;
        
        display.textContent = `${formattedMinutes}:${formattedSeconds}`;
        
        if (--timer < 0) {
          timer = duration; // 倒计时结束后重置，可根据需求修改
        }
      }, 1000);
    }
  </script>
</body>

关键修改说明 #

1. 合并并移除冗余的window.onload：把计时器的启动逻辑直接绑定到按钮点击事件上，这样只有用户选择对应时长后，才会启动对应的计时器，避免提前初始化浪费性能，也解决了window.onload覆盖的问题。
2. 封装通用计时器函数：用一个startTimer函数代替两个重复的函数，通过参数传递时长和显示元素的选择器，后续添加更多计时器（比如30分钟、60分钟）只需要新增按钮，调用同一个函数即可，完全避免变量混淆。
3. 添加定时器清理逻辑：在启动新计时器前，清除该显示元素上可能存在的旧定时器，防止多次点击按钮导致多个定时器同时运行，出现倒计时跳变的问题。
4. 修复无效HTML结构：移除了重复的<body>标签，保证DOM结构的合法性。

这样修改后，你可以轻松扩展更多计时器选项，不会再出现旧功能被覆盖、变量混淆的问题啦！

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