【前端案例】13 - 案例：5秒后跳转页面

5秒后跳转页面

1. 实现5秒倒计时后页面跳转效果：注意将执行过程封装为一个函数，在设置定时器前先执行一下该函数。

点击

点我开始

let btn = document.querySelector('button');
  let clickStart = document.querySelector('.clickStart');
  let content = document.querySelector('.content');
  let timer = 5;

  btn.addEventListener('click', function () {
    console.log(location.href);
    location.href = 'https://www.baidu.com';
  });

  inNewPage();

  /**
   * 点击开始计时
   * */
  clickStart.addEventListener('click', function () {
    setInterval(inNewPage, 1000);
  });

  /**
   * 跳转到新的页面
   */
  function inNewPage() {
    if (timer === 0) {
      location.href = 'https://www.baidu.com';
    } else {
      content.innerHTML = timer + '秒后页面将跳转';
      timer--;
    }
  }