N秒後跳轉的實現(動態倒計時)

效果:


具體實現:

實現原理:

兩段JS代碼,一段使用setTimeout實現延遲跳轉,一段控制倒計時。

具體代碼:

<script type="text/javascript">
	setTimeout("javascript:location.href='${pageContext.request.contextPath}'",5000);
</script>
<script type="text/javascript">
	var i = 6;
	function showtime() {
		i = i - 1;
		document.getElementById("CountDown").innerHTML = i;
		if (i > 1) {
			setTimeout('showtime()', 1000);
		}
	}
</script>
<body οnlοad="showtime()">
	<div id="wrapper">
		<div id="main">
			<header id="header">
			<h1>
				<span class="icon">!</span>404<span class="sub">Page Not Found</span>
			</h1>
			</header>
			<div id="content">
				<h2>您打開的這個的頁面不存在!</h2>
				<p>該頁面不存在或已被刪除, <span id="CountDown" style="color:red"></span> 秒後將自動爲您跳轉到首頁......</p>
				<div class="utilities">
					<a class="button right" href="#" onClick="history.go(-1);return true;">返回上頁</a><a class="button right" href="${pageContext.request.contextPath}">立即返回</a>
					<div class="clear"></div>
				</div>
			</div>
		</div>
	</div>
</body>

發佈了44 篇原創文章 · 獲贊 101 · 訪問量 21萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章