先看效果图吧
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)
我这个是渲染列表是小程序的写法,不要直接复制,没有效果的。小程序的可以。
想要获得更多资料的 请微信搜索公众号 【热血科技】,关注一下即可。