js倒计时(天,时,分,秒),适用于web和移动端

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()
}
})
}






  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值