5秒后返回首页 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
  <div id="demo"></div>
  <script>
      var count=5;  //先设定一个页面跳转的变化时间,5秒之后跳转
      var demo=document.getElementById("demo");
      setTimeout(goIndxePage,1000); //1秒之后，执行goIndexPage这个函数 ,使用setTimeout这个定时器，而不是setInterval，因为函数执行需要5秒，而定时器每隔1秒执行一次函数，虽然setTImeout定时器只能执行一次，但是If，else的判断让这个计时器可以模拟循环使用
      function  goIndxePage() //函数内容
      {
          count--;
          demo.innerHTML="<a href='http://www.baidu.com'>页面将在"+count+"秒钟之后返回百度首页</a>";  //增强用户体验，给一个提示，并且加一个a标签，点击这个a标签可以直接前往百度首页
          if(count<=0) //count小于0,说明5秒时间已经到了,这时候，我们需要跳转页面
          {
              window.location.href="http://www.baidu.com"; //js中的页面跳转
          }
          else
          {
              //setTimeout(goIndxePage,1000);  //count在5秒之内，需要不断的执行goIndexPage这个函数，函数自己调用自己，叫做递归
                setTimeout(arguments.callee,1000) // 当函数递归调用的时候，推荐用arguments.callee来代替函数本身
          }
      }
  </script>
</body>
</html>

　　

posted @ 2019-07-21 21:38  shanlu  阅读(412)  评论(0)    收藏  举报