html代码:
<div class="timeWp">
<div class="countDown"><ul class="countdown">
<li class="seperator"></li>
<li><span class="days">6</span>天</li>
<li class="seperator"></li>
<li><span class="hours">20</span>时</li>
<li class="seperator"></li>
<li><span class="minutes">23</span>分</li>
<li class="seperator"></li>
<li><span class="seconds">00</span>秒</li>
</ul>
</div>
<div class="state">
<img src="img/onyuan@2x.png"/>
<a href="#" id="can" class="buy_go">立即抢购</a>
<a style="display: none;" href="#" id="cannot" class="buy_go">已抢光</a>
</div>
</div>
js代码:
var obj;
$('.countDown ul:first-child').show().siblings('ul').hide()
var endTime='2017-4-14 17:05:00'; //设置一个结束时间
//根据结束时间获取到结束的 年,月,日,时,分,秒
var end_year=endTime.substr(0,4);//年
var index1=endTime.indexOf("-");
var index2=endTime.lastIndexOf("-");
var cha=parseInt(index2)-(parseInt(index1)+1);
var end_month=endTime.substr((parseInt(index1)+1),cha);
var kg=endTime.indexOf(" ");
cha=parseInt(kg)-parseInt(index2);
var end_day=endTime.substr(parseInt(index2)+1,cha);
var mh=endTime.indexOf(":");
cha=parseInt(mh)-(parseInt(kg)+1);
var end_hour=endTime.substr(parseInt(kg)+1,cha);
var mh2=endTime.lastIndexOf(":");
cha=parseInt(mh2)-(parseInt(mh)+1);
var end_minute=endTime.substr(parseInt(mh)+1,cha);
var mh2=endTime.lastIndexOf(":");
var end_second=endTime.substr(parseInt(mh2)+1);
//获取当前年月日时分秒
var myTime = new Date();
var now_year = myTime.getFullYear();
var now_month = myTime.getMonth() + 1;
var now_day = myTime.getDate();
var now_hour = myTime.getHours();
var now_minute = myTime.getMinutes();
var now_second = myTime.getSeconds();
//console.log(now_hour)
var now = Date.UTC(now_year, now_month, now_day ,now_hour ,now_minute ,now_second);
var year = end_year,month = end_month,day=end_day,hour=end_hour,minute=end_minute,second=end_second;
var end = Date.UTC(year, month, day ,hour ,minute ,second);
var left = end - now;//时间差
if (left<=0) {
$('span.days').html('0');
$('span.hours').html('00');
$('span.minutes').html('00');
$('span.seconds').html('00');
$('#cannot').show().siblings('#can').hide()
} else{
var leftDay,leftHour,leftMin,leftSec;
leftSec = left/1000%60;
leftMin = (Math.floor(left/1000/60))%60;
leftHour_ = (left - leftSec*1000 - leftMin*60*1000)/1000/60/60;
leftHour = leftHour_%24;
leftDay = Math.floor(parseFloat(leftHour_)/24);
//alert(leftDay)
$('span.days').html(leftDay);
$('span.hours').html(leftHour);
$('span.minutes').html(leftMin);
$('span.seconds').html(leftSec);
obj = setInterval(function(){
var se = parseFloat($('span.seconds').html());
var min = parseFloat($('span.minutes').html());
var ho = parseFloat($('span.hours').html());
var da = parseFloat($('span.days').html());
if (ho==0) {
ho='00';
}
var se_,min_,ho_;
se--;
hour();
minute();
day();
if (se<10&&se>=0) {
se = '0'+parseFloat(se);
}
if (se<0) {
se=59;
if (min==0&&ho==0) {
$('.countDown ul:first-child').show().siblings('ul').hide()
} else{
min--;
if (min<10&&min>=0) {
min = '0'+min;
}
if (min<0) {
min=59;
ho--;
}
}
}
function minute(){
if (min<10&&min>=0) {
min = '0'+min;
}
}
function hour(){
if (ho<10&&ho>=0) {
ho = '0'+parseFloat(ho);
}
}
function day(){
if (se<0&&min==0&&ho==0) {
da--;
ho=23;
min=59;
se=59;
}
}
$('span.seconds').html(se);
$('span.minutes').html(min);
$('span.hours').html(ho);
$('span.days').html(da);
},1000);
var obj2 = setInterval(function(){
var se_ = parseFloat($('span.seconds').html());
var min_ = parseFloat($('span.minutes').html());
var ho_ = parseFloat($('span.hours').html());
var da_ = parseFloat($('span.days').html());
if (se_==0&&min_==0&&ho_==0&&da_==0) {
clearInterval(obj);
$('#cannot').show().siblings('#can').hide()
}
})
}