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

时间:4年前   阅读:6496

倒计时,在网页制作中会经常用到,特别是一些节日活动页面运用更是广泛。搜了一下网上没有到计时广告位置到期后自动删除广告改变原来的内容这种写法,这个是我原创写的吧,反正在网上也没搜到类似的?今天就和大家分享一下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,我们将及时处理。

微信扫码关注

更新实时通知

上一篇:场外期权推动鸡蛋产业扶贫落地开花

下一篇:广告联盟代码生成

网友评论

请先 登录 再评论,若不是会员请先 注册