jQuery图片替换数字的倒计时(自动循环)

本文由清尘发表于2015-05-20 20:56属于jQuery分类

点击查看演示

HTML部分:

<ul id="cptimer">
	<li>
		 <div class="evt_countdown"></div>
	</li>
	<li>
		 <div class="evt_countdown"></div>
	</li>
	<li>
		 <div class="evt_countdown"></div>
	</li>
</ul>

JS部分:

<script type="text/javascript">
function timerBox(idstr,timestr,day){
	var timeBox=$(idstr),
	t=day,
	starTime=new Date(timestr),
	timer;
	function count(){
	endTime=new Date(),
	newTime=parseInt((endTime.getTime()-starTime.getTime())/1000),
	n=parseInt(newTime/3600/24/t),
	leftSecond=t*24*3600-(newTime-t*n*24*3600),
	day=parseInt(leftSecond/3600/24),
	hour=parseInt((leftSecond/3600)%24),
	minite=parseInt((leftSecond/60)%60),
	second=parseInt(leftSecond%60);
  var _formatNumber = function(LeftDays){
            if(LeftDays < 0) LeftDays = '<i class="n0">0</i><i class="n0">0</i>';
            if(LeftDays < 10) {
                LeftDays = '<i class="n0">0</i>' + '<i class="n'+LeftDays+'">' + LeftDays + '</i>';
            }else{
                LeftDays = new String(LeftDays);
                LeftDays = '<i class="n'+(LeftDays.substr(0,1))+'">' + (LeftDays.substr(0,1)) + '</i>' + '<i class="n'+(LeftDays.substr(1,2))+'">' + (LeftDays.substr(1,2)) + '</i>'
            }
            return LeftDays;
        };

	if(leftSecond>0){
		timeBox.html("<s></s><span>"+(_formatNumber(hour))+"</span><em></em>"+"<span>"+(_formatNumber(minite))+"</span><em></em>"+"<span>"+(_formatNumber(second))+ "</span>");
		timer=setTimeout(count,1000);
	}else{
		timeBox.html("抢购已经结束!");
		clearTimeout(timer);
	};

	};

	count();
	
};

timerBox("#cptimer .evt_countdown",'2015/05/11 23:59:59',20);
</script>

CSS部分:

/*--- 倒计时模块"---*/
    .evt_countdown { height: 21px; font-size: 16px; color: #555; margin: 0 auto; text-align: center; width: 150px;}
    .evt_countdown s { float: left;width: 21px; height: 21px; background: url(countbg.png) no-repeat -30px 0; margin: -3px 12px 0 0; font-size: 0;}
    .evt_countdown span { float: left; text-align: left;width: 26px; height: 15px; line-height: 35px; font-size: 28px; font-weight: bold; color: #fff; margin-right: 0; letter-spacing: 12px; text-indent: 4px;}
    .evt_countdown em { float: left; text-align: left;width: 10px; height: 15px; background: url(countbg.png) no-repeat -30px -27px; *display: inline; margin: 0 1px 0 3px;}
    .evt_countdown span i { float: left; width: 10px; height: 15px; margin-right: 2px; background: url(countbg.png) no-repeat; text-indent: -999em; overflow: hidden;}
    .evt_countdown span i.n0 { background-position: 0 0;}
    .evt_countdown span i.n1 { background-position: 0 -30px;}
    .evt_countdown span i.n2 { background-position: 0 -60px;}
    .evt_countdown span i.n3 { background-position: 0 -90px;}
    .evt_countdown span i.n4 { background-position: 0 -120px;}
    .evt_countdown span i.n5 { background-position: 0 -150px;}
    .evt_countdown span i.n6 { background-position: 0 -180px;}
    .evt_countdown span i.n7 { background-position: 0 -210px;}
    .evt_countdown span i.n8 { background-position: 0 -240px;}
    .evt_countdown span i.n9 { background-position: 0 -270px;}
    .evt_countdown_hot span i.n0,
    li:hover .evt_countdown span i.n0 { background-position: -15px 0;}
    .evt_countdown_hot span i.n1,
    li:hover .evt_countdown span i.n1 { background-position: -15px -30px;}
    .evt_countdown_hot span i.n2,
    li:hover .evt_countdown span i.n2 { background-position: -15px -60px;}
    .evt_countdown_hot span i.n3,
    li:hover .evt_countdown span i.n3 { background-position: -15px -90px;}
    .evt_countdown_hot span i.n4,
    li:hover .evt_countdown span i.n4 { background-position: -15px -120px;}
    .evt_countdown_hot span i.n5,
    li:hover .evt_countdown span i.n5 { background-position: -15px -150px;}
    .evt_countdown_hot span i.n6,
    li:hover .evt_countdown span i.n6 { background-position: -15px -180px;}
    .evt_countdown_hot span i.n7,
    li:hover .evt_countdown span i.n7 { background-position: -15px -210px;}
    .evt_countdown_hot span i.n8,
    li:hover .evt_countdown span i.n8 { background-position: -15px -240px;}
    .evt_countdown_hot span i.n9,
    li:hover .evt_countdown span i.n9 { background-position: -15px -270px;}
    .evt_countdown_hot, li:hover .evt_countdown { color: #f75d57;}
    .evt_countdown_hot span i,li:hover .evt_countdown span i { background-image: url(countbg.png);}
    .evt_countdown_hot s, li:hover .evt_countdown s { background-position: -51px 0;}
    .evt_countdown_hot em, li:hover .evt_countdown em { background-position: -40px -27px;}