jquery倒计时指定时间自动修改内容

时间：5年前阅读：7728

倒计时，在网页制作中会经常用到，特别是一些节日活动页面运用更是广泛。搜了一下网上没有到计时广告位置到期后自动删除广告改变原来的内容这种写法，这个是我原创写的吧，反正在网上也没搜到类似的？今天就和大家分享一下jQuery如何实现倒计时。话不多说，言归正传，倒计时开始：

效果点--(运行代码)来看

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			#uu{    
				width: 600px;    
				height: 100px;    
				margin: 100px auto;    
				border: 1px solid darkcyan;    
				text-align: center;    
				line-height: 100px;    
				color: darkblue;    
				font-size: 20px;    
				font-weight: 700;    
			}    
			#uu span{    
				color: white;    
				background: darkcyan;    
			}    
			#uu .nn{    
				/*width: 600px;    
				height: 100px;    
				margin: 100px auto;    
				border: 1px solid darkcyan;    
				text-align: center;    
				line-height: 100px;    
				color: darkblue;    
				font-size: 20px;    
				font-weight: 700;*/    
				display: none;    
			}    
		</style>    
		<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>    
		<script type="text/javascript">    
			window.onload = function(){    
				var w;    
				function hs(){    
				var xj = new Date();    
				var wl = new Date(2019,09,24,23,10,30);    
				var ss = wl.getTime()-xj.getTime();    
				if (ss<0) {    
					ss=0;    
				}    
				if (ss==0) {    
					clearInterval(w);    
					$('.cc').css({display:'none'});    
					$('.nn').css({display:'block'})    
				}    
				var tian = parseInt(ss/(24*60*60*1000)) ;    
				if (tian<10) {    
					tian = '0'+tian;    
				}    
				ss= ss%(24*60*60*1000);    
				var xiaoss = parseInt(ss/(60*60*1000));    
				if (xiaoss<10) {    
					xiaoss = '0'+xiaoss;    
				}    
				ss=ss%(60*60*1000);    
				var fen = parseInt(ss/(60*1000));    
				if (fen<10) {    
				fen = '0'+fen;					    
				}    
				ss=ss%(60*1000);    
				var miao = parseInt(ss/(1000));    
				if (miao<10) {    
					miao='0'+miao;    
				}    
				var uu = document.getElementById('uu');    
				var kk = uu.getElementsByTagName('span');    
				kk[0].innerHTML = tian;    
				kk[1].innerHTML = xiaoss;    
				kk[2].innerHTML = fen;    
				kk[3].innerHTML = miao;	
    
				}    
				hs();    
				w=setInterval(hs,1000);    
			}    
		</script>    
	</head>    
	<body>    
		<div id="uu">    
			<div class="cc">距离百家惠打折活动还有：<span>0</span>天:<span>0</span>时:<span>0</span>分:<span>0</span>秒，开始！</div>    
		<div class="nn">    
			<a href="http://www.youku.com/">你的广告位到期;</a>    
		</div>	    
		</div>    
	</body>    
</html>

效果静态展示，动态效果点上面的（运行代码）来看

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jquery倒计时指定时间自动修改内容

网友评论