5秒返回页面

淩亂°似流年 2022-08-18 12:22 104阅读 0赞

## Jquery实战之5秒返回页面 ##

## 倒计时，几秒后跳回首页 ##

效果图：

![Center][]

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

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

第三步：导入JQuery类库（也可以理解为内裤![偷笑][titter.gif]）

第四步：设置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_download.csdn.net_detail_qq_19558705_9369176]

转载注明来源：[http://blog.csdn.net/qq\_19558705/article/details/49851879][http_blog.csdn.net_qq_19558705_article_details_49851879]

更多干货等你来拿 [http://www.itit123.cn/][http_www.itit123.cn]

[Center]: /images/20220731/6129a00421f84f70b16ada55a2276994.png
[titter.gif]: /images/20220731/c7d763f245e04b059dce70a495884476.png
[http_download.csdn.net_detail_qq_19558705_9369176]: http://download.csdn.net/detail/qq_19558705/9369176
[http_blog.csdn.net_qq_19558705_article_details_49851879]: http://blog.csdn.net/qq_19558705/article/details/49851879
[http_www.itit123.cn]: http://www.itit123.cn/