JavaScript 小程序 商城倒计时效果

先看效果图吧

1、首先想要实现这个效果需要获取到当前时间的时间戳

var timestamp = Date.parse(new Date());//获取到毫秒

 

2、拿到后台返回的活动结束的时间戳

 

3、计算两者之间相差的天数、小时、分钟、以及秒数

//计算两个时间戳之间相差多少时间
function date(start_time, end_time) {
    var start_time = start_time;//开始时间
    var end_time = end_time;//结束时间
    var usedTime = end_time - start_time;  //两个时间戳相差的毫秒数  
    var days = Math.floor(usedTime / (24 * 3600 * 1000));//相差的天数
    
    var leave1 = usedTime % (24 * 3600 * 1000);    //计算天数后剩余的毫秒数  
    var hours = Math.floor(leave1 / (3600 * 1000));   //计算出小时数  
    
    var leave2 = leave1 % (3600 * 1000);        //计算小时数后剩余的毫秒数  
    var minutes = Math.floor(leave2 / (60 * 1000));//计算相差分钟数  
    
    var leave3 = leave2 % (60 * 1000); //计算分钟后剩下的毫秒数
    var s = Math.floor(leave3 / 1000);   //计算相差秒数
    
    return { day: days, h: hours, minutes: minutes, s: s };
}

直接调用这个方法就可以，第一个参数是 当前时间戳 第二个时间是活动结束的时间戳

4、实现动态的效果

其实也很简单，加一个定时器就可以了，但是有一点当前的时间戳要放在定时器里面，不然不会动态改变。

我的结束时间 * 1000 是因为后台给我返回的时间戳只到秒

setInterval(function () {
                var timestamp = new Date().getTime();
                _this.setData({
                    days: date(timestamp, endtime * 1000).day,
                    hours: date(timestamp, endtime * 1000).h,
                    minutes: date(timestamp, endtime * 1000).minutes,
                    s: date(timestamp, endtime * 1000).s
                })
            }, 1000)

我这个是渲染列表是小程序的写法，不要直接复制，没有效果的。小程序的可以。 

想要获得更多资料的  请微信搜索公众号 【热血科技】，关注一下即可。