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>

 

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