javaScript练习6

最新推荐文章于 2022-05-25 16:39:41 发布

anmic123

最新推荐文章于 2022-05-25 16:39:41 发布

阅读量282

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/anmic123/article/details/81175725

版权

javaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

编程练习

制作一个跳转提示页面：

要求：

1. 如果打开该页面后，如果不做任何操作则5秒后自动跳转到一个新的地址，如慕课网主页。

2. 如果点击“返回”按钮则返回前一个页面。

效果:

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

任务

第一步：先编写好网页布局，如下:

第二步：获取显示秒数的元素，通过定时器来更改秒数。

第三步：通过window的location和history对象来控制网页的跳转。

<!DOCTYPE html>
<html>
<meta charset="GBK">
 <head>
  <title>浏览器对象</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   
 </head>
 <body>
  <!--先编写好网页布局-->
    <H4>操作成功</H4>
  <p>
     <b id="second">5</b>秒后回到主页&nbsp;<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://www.imooc.com/";
		}
	},1000);

   //通过window的location和history对象来控制网页的跳转。
     function goBack(){ 
	window.history.go(-1);
  } 
 </script> 
</body>
</html>

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
代码中sec.innerHTML=i 表示在id="second"的标签（即b标签）里插入i。