如何在JavaScript的onTimesUp函数中实现计时结束后自动跳转链接？

只需要在onTimesUp函数中添加页面跳转代码即可，有两种常用实现方式：

方式一：保留当前页面历史记录 #

跳转后用户可通过浏览器返回按钮回到计时页面，使用window.location.href：

function onTimesUp() {
  clearInterval(timerInterval);
  // 将下方链接替换为你的目标地址
  window.location.href = "你的目标链接地址";
}

方式二：不保留当前页面历史记录 #

跳转后无法通过返回按钮回到计时页面，使用window.location.replace：

function onTimesUp() {
  clearInterval(timerInterval);
  // 将下方链接替换为你的目标地址
  window.location.replace("你的目标链接地址");
}

完整修改后的代码示例 #

<script>
   
    const TIME_LIMIT = 60;
    let timePassed = 0;
    let timeLeft = TIME_LIMIT;
    let timerInterval = null;
    let remainingPathColor = COLOR_CODES.info.color;
    
    startTimer();
    
    function onTimesUp() {
      clearInterval(timerInterval);
      // 此处添加跳转代码，示例采用保留历史记录的方式
      window.location.href = "你的目标链接地址";
    }
    
    function startTimer() {
      timerInterval = setInterval(() => {
        timePassed = timePassed += 1;
        timeLeft = TIME_LIMIT - timePassed;
        document.getElementById("base-timer-label").innerHTML = formatTime(
          timeLeft
        );
        setCircleDasharray();
        setRemainingPathColor(timeLeft);
    
        if (timeLeft === 0) {
          onTimesUp();
        }
      }, 1000);
    }
 
</script>

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