限時購

這兩天有個限時購的活的,有需求就寫了一個限時購的demo比較粗糙。
html:

//開始和結束時間都是后臺定的,這邊為了測試就寫死了
<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>

/*實現思路:
  活動開始時間 - 現在時間 = 活動開始前倒計時時間
  活動結束時間 - 現在時間 = 活動進行時間
*/
//不足兩位補0
function timeS(num){
    return ('0'+num).slice(-2);//從最后兩位截取
}
function FreshTime(){
    //這兩個是后臺返回的時間戳,為了便于測試把開始時間變成當前本地的時間
    var attr_s = $('.box').attr('start-time');//獲取div中的固定開始時間;
    var attr_e = $('.box').attr('end-time');//獲取div中的固定結束時間;
            
    var nowtTime =new Date().getTime();//每秒實時獲取現在的時間
        //后臺跟我說,要時間到了,要進行事件處理,喊我寫個判斷,而且后臺是10位數,所以我只能這樣了
        //不需要的可以把這里刪了
    var nowtTime2 = parseInt(new Date().getTime()/1000);
    //活動開始時間-實時獲取現在時間 = 活動開始倒計時時間
    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+"天"+timeS(h)+"時"+timeS(m)+"分"+timeS(s)+"秒");
        }else if (differTime<=0) {
        if (nowtTime2==Number(attr_s.substr(0,10))) {
                  //與后臺活動開始時間做判斷,執行方法
            alert('活動開始~')
        }
    //活動結束時間 = 結束時間 - 現在時間
        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('搶購時間:'+dd+"天"+timeS(hh)+"時"+timeS(mm)+"分"+timeS(ss)+"秒");       
        }
    if(lastTime<=0){
        if (nowtTime2==Number(attr_e.substr(0,10))) {
                //與后臺活動結束時間做判斷,執行方法
            alert('活動結束')
        }
        clearInterval(timer);
        $(".box").html('活動結束啦')
    }   
}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容