美文网首页
js5秒跳转到默认页面 定时器操作

js5秒跳转到默认页面 定时器操作

作者: jasmine_jing | 来源:发表于2017-03-01 16:03 被阅读0次

    制作一个跳转提示页面:
    要求:

    1. 如果打开该页面后,如果不做任何操作则5秒后自动跳转到一个新的地址,如慕课网主页。
    2. 如果点击“返回”按钮则返回前一个页面。
      效果:

      注意: 在窗口中运行该程序时,该窗口一定要有历史浏览记录,否则"返回"无效果。

    任务
    第一步: 先编写好网页布局,如下:


    第二步: 获取显示秒数的元素,通过定时器来更改秒数。
    第三步: 通过window的location和history对象来控制网页的跳转。
    <!DOCTYPE html>
    <html>
     <head>
      <title>浏览器对象</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   
     </head>
     <body>
      <!--先编写好网页布局-->
      <h3>操作成功</h3>
      <p>
          <b id="second">5</b>秒后回到主页 <a href="javascript:goBack();">返回</a>
      </p>
     
      <script type="text/javascript">  
       //获取显示秒数的元素,通过定时器来更改秒数。
      var sec = document.getElementById("second");
      var i=5;
      var timer = setInterval(function(){
          i--;
          sec.innerHTML = i;   
          if(i ==1){
              window.location.href="http://baidu.com";
          }
      },1000) 
      
       //通过window的location和history对象来控制网页的跳转。
       function goBack(){
           window.history.go(-1);
       }
       
     </script> 
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:js5秒跳转到默认页面 定时器操作

          本文链接:https://www.haomeiwen.com/subject/xjnqgttx.html