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
更多干货等你来拿 http://www.itit123.cn/