1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

js倒计时效果 限时秒杀抢购打折等效果示例

网站购物做限时抢购、秒杀的JS倒计时代码,之前做的活动页面很多都用到了倒计时功能,所以整理下分享给大家。css根据不同做出你自已想要的美化效果,这里主要写出没有BUG的JS代码

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<style type="text/css">      			*{      				padding: 0;      				margin: 0;      			}      			span{      				width: 36px;      				height: 36px;      				background: darkcyan;      				color: white;      			}      		</style>      		<script type="text/javascript">      			window.onload = function(){      				var t;      				function hs(){      				var new_time = new Date();      				var wl_time = new Date(2018,8,10,0,30,0);      				var xsj = wl_time.getTime() - new_time.getTime();      				if (xsj<0) {      					xsj=0;      				}      				if (xsj==0) {      					clearInterval(t);      //					tian = '00';      //					xiaosi = '00';      //					fen = '00';      //					miao = '00';      				}      				var tian = parseInt(xsj/(24*60*60*1000));      				if (tian<10) {      					tian = "0"+tian;      				}      				xsj = xsj%(24*60*60*1000);      				var xiaosi = parseInt(xsj/(60*60*1000));      				if (xiaosi<10) {      					xiaosi = '0'+xiaosi;      				}      				xsj = xsj%(60*60*1000);      				var fen = parseInt(xsj/(60*1000));      				if (fen<10) {      					fen = '0'+fen;      				}      				xsj = xsj%(60*1000);      				var miao = parseInt(xsj/1000);      				if (miao<10) {      					miao = '0'+miao;      				}      //				var time = document.getElementById('time');      				var kk = document.getElementById('time').getElementsByTagName('span');      				kk[0].innerHTML = tian;      				kk[1].innerHTML = xiaosi;      				kk[2].innerHTML = fen;      				kk[3].innerHTML = miao;	        				}      				hs();      				t = setInterval(hs,1000);      			}      		</script>      	</head>      	<body>      		<div id="time">距离百家惠全场打折活动还剩<span>0</span>天<span>0</span>小时<span>0</span>分钟<span>0</span>秒</div>      	</body>      </html>

原文链接:https://www.qiquanji.com/post/7371.html

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: