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

时间：5年前阅读：5586

网站购物做限时抢购、秒杀的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,我们将及时处理。

微信扫码关注

更新实时通知

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

网友评论

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