5秒返回页面

Jquery实战之5秒返回页面


倒计时,几秒后跳回首页

效果图:

第一步:准备两个页面,一个首页index.html,一个错误页面404.html

第二步:做一个错误提示信息,注意数字 5 要单独提出来,因为要动态赋值

第三步:导入JQuery类库(也可以理解为内裤偷笑

第四步:设置JQuery函数作用域$(function(){});和计时器setInterval(function(){},1000);还有修改页面内容$("").html();最后是跳转路径window.location.href="";

<!DOCTYPE HTML>
<html>

	<head>
		<title>404错误页面</title>
		<meta charset="utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			body{background: url(img/404.jpg);background-size: cover;}
			.error{width: 100px;margin: 0 auto;}
			#count b{font-size: 65px;color:#BF3333;}
		</style>
	</head>

	<body>
		<div class="error">
	        <span id = "count"><b> 5 </b></span>
			<a class="btn btn-warning" href="WOWdemo.html">点击返回</a>
		</div>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript">
			$(function() {
				var count = 5;
				setInterval(function() {
					count--;
					if (count <= 0) window.location.href = "WOWdemo.html";
					$("#count").html("<b>" + count + "</b>");
				}, 1000); 
			});
		</script>
	</body>

</html>

资源下载路径: http://download.csdn.net/detail/qq_19558705/9369176

转载注明来源:http://blog.csdn.net/qq_19558705/article/details/49851879



你可能感兴趣的:(jquery,定时器)