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

2017-03-01  本文已影响0人  jasmine_jing

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

  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>
上一篇 下一篇

猜你喜欢

热点阅读