js几秒以后倒计时跳转示例

下面我将为您提供“js几秒以后倒计时跳转示例”的完整攻略。

示例一：使用window.setTimeout()方法实现倒计时跳转

1. 首先，在HTML页面中添加一个div元素，用于显示倒计时的时间：

<div id="countdown">5</div>

1. 接下来，添加以下JavaScript代码：

// 获取倒计时div元素
var countdownElement = document.getElementById("countdown");
// 获取跳转地址
var url = "http://www.example.com";
// 设置倒计时时间
var countdownTime = 5;
// 定义倒计时函数
function countdown() {
  // 倒计时时间减一
  countdownTime--;
  // 如果倒计时时间小于等于0，则跳转到指定页面
  if (countdownTime <= 0) {
    window.location.href = url;
    return;
  }
  // 设置倒计时div元素的文本内容
  countdownElement.textContent = countdownTime;
  // 使用window.setTimeout()方法每隔1秒执行一次countdown函数
  window.setTimeout(countdown, 1000);
}
// 调用倒计时函数
countdown();

1. 运行代码，页面会显示一个倒计时div元素，初始值为5。每隔1秒，倒计时div元素的值会减一，直到倒计时时间小于等于0时，会自动跳转到指定的URL地址。

示例二：使用setInterval()方法实现倒计时跳转

1. 在HTML页面中添加一个div元素，用于显示倒计时的时间：

<div id="countdown">5</div>

1. 添加以下JavaScript代码：

// 获取倒计时div元素
var countdownElement = document.getElementById("countdown");
// 获取跳转地址
var url = "http://www.example.com";
// 设置倒计时时间
var countdownTime = 5;
// 定义定时器ID变量
var timerId;
// 定义倒计时函数
function countdown() {
  // 倒计时时间减一
  countdownTime--;
  // 如果倒计时时间小于等于0，则清除定时器，并跳转到指定页面
  if (countdownTime <= 0) {
    clearInterval(timerId);
    window.location.href = url;
    return;
  }
  // 设置倒计时div元素的文本内容
  countdownElement.textContent = countdownTime;
}
// 调用setInterval()方法每隔1秒执行一次countdown函数，并将返回的定时器ID保存到timerId变量中
timerId = setInterval(countdown, 1000);

1. 运行代码，页面会显示一个倒计时div元素，初始值为5。每隔1秒，倒计时div元素的值会减一，直到倒计时时间小于等于0时，会自动跳转到指定的URL地址。

以上就是实现“js几秒以后倒计时跳转示例”的完整攻略，希望能对您有帮助。