限时购

这两天有个限时购的活的,有需求就写了一个限时购的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('活动结束啦')
    }   
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容