HTML实现倒计时跳转


<!doctype html>
<html lang="zh"><!-- TODO(dbeam): dir="ltr"? -->
<!-- Copyright 2015 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->
<head>

<!-- 分析:
			1、需要先有页面效果
			2、倒计时读秒实现
				1.定义一个方法实现修改span里的内容
				2.定义一个定时器,每秒修改一次
			3、跳转。判断标志,为真的时候关闭定时器并跳转到指定页
 -->
	<style>
		p{
			text-align : center;
		}
		
		p span{
			color:red;
		}
		
		
	</style>
	
</head>
<body>
<!-- 1、页面效果 -->
	<p>
	<span id = "time">5</span>秒后,跳转到百度
	</p>

    <script>
		var time = 5 ;
<!-- 2、倒计时读秒实现并判断跳转-->
		function showTime (){
			
			time--;
			if(time<=0){
				//clearInterval(id);
           
				location.href = "http://www.baidu.com";
			}
			var sp = document.getElementById("time");
			sp.innerHTML = time ;
		}
		
		var id = setInterval(showTime,1000);
		
		
	</script>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章