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

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

  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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • ECMAScript 是 JavaScript 的核心,但如果要在 Web 中使用 JavaScript,那么 B...
    劼哥stone阅读 880评论 2 5
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 178,453评论 25 709
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,900评论 0 8
  • 最近写字比较多,每天除了吃饭,睡觉,跑步和陪孩子玩,我将绝大部分的时间都放在了写字上,我感觉这是我与自己的内心对话...
    红提阅读 633评论 2 1
  • 大家好。我的朋友Ben Lim和Daniel Comber-Todd在中国旅游。四月25日,Ben从云南大理飞回了...
    樊与臻阅读 654评论 0 1

友情链接更多精彩内容