這兩天有個(gè)限時(shí)購的活的,有需求就寫了一個(gè)限時(shí)購的demo比較粗糙。
html:
//開始和結(jié)束時(shí)間都是后臺(tái)定的,這邊為了測(cè)試就寫死了
<div class="box" end-time="2501218350000" start-time="1511218250000"></div>
js:
//jq庫
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
/*實(shí)現(xiàn)思路:
活動(dòng)開始時(shí)間 - 現(xiàn)在時(shí)間 = 活動(dòng)開始前倒計(jì)時(shí)時(shí)間
活動(dòng)結(jié)束時(shí)間 - 現(xiàn)在時(shí)間 = 活動(dòng)進(jìn)行時(shí)間
*/
//不足兩位補(bǔ)0
function timeS(num){
return ('0'+num).slice(-2);//從最后兩位截取
}
function FreshTime(){
//這兩個(gè)是后臺(tái)返回的時(shí)間戳,為了便于測(cè)試把開始時(shí)間變成當(dāng)前本地的時(shí)間
var attr_s = $('.box').attr('start-time');//獲取div中的固定開始時(shí)間;
var attr_e = $('.box').attr('end-time');//獲取div中的固定結(jié)束時(shí)間;
var nowtTime =new Date().getTime();//每秒實(shí)時(shí)獲取現(xiàn)在的時(shí)間
//后臺(tái)跟我說,要時(shí)間到了,要進(jìn)行事件處理,喊我寫個(gè)判斷,而且后臺(tái)是10位數(shù),所以我只能這樣了
//不需要的可以把這里刪了
var nowtTime2 = parseInt(new Date().getTime()/1000);
//活動(dòng)開始時(shí)間-實(shí)時(shí)獲取現(xiàn)在時(shí)間 = 活動(dòng)開始倒計(jì)時(shí)時(shí)間
var differTime = attr_s - nowtTime;
var d = parseInt(differTime/(24*60*60*1000));
var h = parseInt(differTime/(60*60*1000)%24);
var m = parseInt(differTime/(60*1000)%60);
var s = parseInt(differTime/1000%60);
if (differTime>0) {
$(".box").html('活動(dòng)開始還有:'+d+"天"+timeS(h)+"時(shí)"+timeS(m)+"分"+timeS(s)+"秒");
}else if (differTime<=0) {
if (nowtTime2==Number(attr_s.substr(0,10))) {
//與后臺(tái)活動(dòng)開始時(shí)間做判斷,執(zhí)行方法
alert('活動(dòng)開始~')
}
//活動(dòng)結(jié)束時(shí)間 = 結(jié)束時(shí)間 - 現(xiàn)在時(shí)間
var lastTime = attr_e - nowtTime ;
var dd = parseInt(lastTime/(24*60*60*1000));
var hh = parseInt(lastTime/(60*60*1000)%24);
var mm = parseInt(lastTime/(60*1000)%60);
var ss = parseInt(lastTime/1000%60);
$(".box").html('搶購時(shí)間:'+dd+"天"+timeS(hh)+"時(shí)"+timeS(mm)+"分"+timeS(ss)+"秒");
}
if(lastTime<=0){
if (nowtTime2==Number(attr_e.substr(0,10))) {
//與后臺(tái)活動(dòng)結(jié)束時(shí)間做判斷,執(zhí)行方法
alert('活動(dòng)結(jié)束')
}
clearInterval(timer);
$(".box").html('活動(dòng)結(jié)束啦')
}
}