因为项目需要做了一个倒计时的小功能,虽然不是多难,但是整理出来以后用的时候更方便。
本次项目为vue项目,js项目同理,只是语法略微不同。
首先肯定要拿到结束时间:
this.endTime = res.endTime;
然后调用倒计时计算函数,以便公用:
this.suan();
并且每秒调用一次:
var timer = setInterval(() =>{ this.suan(); },1000);
在计算函数内部:
suan(){
this.time = new Date().getTime() / 1000; // 获取当前时间
this.timeCount.time = (this.endTime - this.time); // 倒计时计算
if(this.timeCount<0){this.timeCount=0} //防止倒计时为负
var arr = this.toDay(this.timeCount); //时间差转换为天、时、分、秒
// 数据更新不重新渲染解决方案
this.$set(this.timeCount,'t',{
days: arr[0], //拿到toDay返回的数组中对应的数据,赋值给对应属性
hours: arr[1],
minutes: arr[2],
seconds: arr[3]
})
}
// this.timeCount为倒计时对象,下面包含时间差的时间戳、以及转为天时分秒后的数据,至于它为什么是一个对象,是因为在vue内直接改变data中的数据,页面数据不会第一时间更新,所以改为——更改数据的属性
时间戳转为时间段函数
toDay(mss){
var days = parseInt(mss.time / (1000 * 60 * 60 * 24));
var hours = parseInt((mss.time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = parseInt((mss.time % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.round((mss.time % (1000 * 60)) / 1000);
var arr=[days,hours,minutes,seconds];
return arr; //用一个数组存储day hours min sec数据,并return
}
附赠时间戳转为时间函数,用于测试获取的时间戳是否正确
toDate(timestamp){
var date = new Date(timestamp * 1000);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
return Y+M+D+h+m+s;
}