JS实现倒计时三秒跳转后到新页面

62 阅读 0 评论 41 点赞

我是靠谱客的博主感性灰狼，最近开发中收集的这篇文章主要介绍JS实现倒计时三秒跳转后到新页面，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

为了是网站的页面更友好，更加人性化，我们往往会在操作错误或是成功的时候进行提示然后跳转到相应的页面。同时为了使页面更加美化，我们往往会加上倒计时跳转功能，也就是使网页上的秒杀呈现倒数显示。下面就是具体的实现过程。

1、添加mate

<meta http-equiv="refresh" content="3;url=http://blog.csdn.net/zhihua_w" />
这个mate的功能就是实现跳转，content中的内容3就是三秒后跳转，url就是所要跳转的地址。光有这些还不够，我们只知道三秒后跳转了，但是在页面上看不到，这是我们就要在页面上显示出倒计时功能，这也就用到了JS。

2、编写html提示页面

<!DOCTYPE html>
<html lang="en">

	<head>
		<!-- BEGIN META -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="Custom Theme">
		<meta http-equiv="refresh" content="3;url=http://blog.csdn.net/zhihua_w" />
		<!-- END META -->
		<!-- BEGIN STYLESHEET-->
		<!-- 这边的页面css样式需要自行设计 -->
		<!-- END STYLESHEET-->
		<title>
			Error
		</title>
	</head>

	<body class="body-404">
		<div class="container">
			<!-- BEGIN MAIN CONTENT -->
			<section class="error-wrapper">
				<img src="/img/error.png">
				<h3>提示内容</h3>
				<p class="page-404">
					<span>页面自动</span>
					<a href="http://blog.csdn.net/zhihua_w">跳转</a>
					<span>等待时间：</span>
					<span class="second">3</span>
				</p>
			</section>
			<!-- END MAIN CONTENT -->
		</div>
	</body>
	<!-- BEGIN JS -->
	<script src="js/jquery.js"></script>
	<!-- BASIC JQUERY LIB. JS -->
	<!-- END JS -->

</html>

页面的样式最好自己设计一个符合审美观的，这样的html页面写起来都比较简单。页面写好之后就是如何在页面上实现倒计时显示了。

3、js实现

	<script type="text/javascript">
		$(function() {
			var wait = $(".second").html();
			timeOut();
			/**
			 * 实现倒计时
			 */
			function timeOut() {
				if(wait != 0) {
					setTimeout(function() {
						$('.second').text(--wait);
						timeOut();
					}, 1000);
				}
			}
		});
	</script>
将此段js代码加入到上述html页面中，即可！这样就非常完美的实现了倒计时三秒之后跳转到新页面。