调用的时候看你有哪些数据,然后调用不同的方法。
1、已有倒计时天,小时,分钟,秒调用startData方法
2、已有当前时间和目标时间调用initData
上面两个方法的参数有个callBack需要你传入一个方法,用来接收倒计时通知,会返回两个数据:
属性名 | 类型 | 说明 |
---|---|---|
status | String | 倒计时状态 timeprogress:进行中 / timeup:结束 |
values | Object | 进行中状态下返回天,小时,分钟,秒,结束状态下返回空对象 |
/**
* js倒计时对象
*/
let countdownObj = {
timer: null,
syncFlag: false,
d: '00',
h: '00',
i: '00',
s: '00',
leftTime: 0,
seconds: 0,
progressIsCallBack:true,
callBackFun:null,
/**
* 时间需要处理,根据格林威治初始化
* @param {*} callBack 结束时需要调用的方法
* @param {*} endTime 目标时间
* @param {*} serverDate 获取的服务器当前时间
*/
initData(callBack,endTime,serverDate){
let targetTime = Date.parse(endTime);
let serverTime = Date.parse(serverDate); // 请求服务端接口,返回服务器当前时间戳
let localTime = this.getNowDate(8); // 用户本地时间戳
let timeOff = serverTime - localTime;
let rightTargetTime = targetTime - timeOff; // 去除偏差后的目标时间
let newDate = this.getTimeDifference(serverDate,rightTargetTime);
this.startData(callBack,newDate.day,newDate.hour,newDate.minute,newDate.second);
},
/**
* 倒计时起始方法(传入天,小时,分钟,秒)
* @param {*} callBack 结束时需要调用的方法
* @param {*} day 倒计时天
* @param {*} hour 倒计时小时
* @param {*} minute 倒计时分钟
* @param {*} second 倒计时秒
* @param {*} timestamp
* @returns
*/
startData(callBack,day=0,hour=0,minute=0,second=0,timestamp = 0) {
this.callBackFun = callBack;
this.day = day;
this.hour = hour;
this.second = second;
this.minute = minute;
this.timestamp = timestamp;
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
if (this.seconds <= 0) {
this.seconds = this.toSeconds(0, 0, 0, 0, 0)
this.countDown()
return
}
clearInterval(this.timer)
this.countDown()
this.timer = setInterval(() => {
this.seconds--
if (this.seconds < 0) {
this.timeUp()
return
}
this.countDown()
}, 1000)
},
/**
* 返回天时分钟秒
* @param {*} startDateString 当前时间
* @param {*} endDateString 目标时间
* @returns
*/
getTimeDifference(startDateString, endDateString) {
var start = new Date(startDateString); // 开始日期
var end = new Date(endDateString); // 结束日期
var timeDiffInMs = Math.abs(end - start); // 获取时间差(单位为毫秒)
var diffDays = Math.floor(timeDiffInMs / (1000 * 3600 * 24)); // 计算天数
var diffHours = Math.floor((timeDiffInMs % (1000 * 3600 * 24)) / (1000 * 3600)); // 计算小时数
var diffMinutes = Math.floor((timeDiffInMs % (1000 * 3600)) / (1000 * 60)); // 计算分钟数
var diffSeconds = Math.floor((timeDiffInMs % (1000 * 60)) / 1000); // 计算秒数
return {
day:diffDays,
hour:diffHours,
minute:diffMinutes,
second:diffSeconds
}
},
/**
* 本地时间
* @param {*} timeZone
* @returns
*/
getNowDate(timeZone) {
var timezone = timeZone || 8; //目标时区时间,东八区
// 本地时间和格林威治的时间差,单位为分钟
var offset_GMT = new Date().getTimezoneOffset();
// 本地时间距 1970 年 1 月 1 日午夜(GMT 时间)之间的毫秒数
var nowDate = new Date().getTime();
var targetDate = nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000;
return targetDate;
},
countDown() {
let seconds = this.seconds
let [day, hour, minute, second] = [0, 0, 0, 0]
if (seconds > 0) {
day = Math.floor(seconds / (60 * 60 * 24))
hour = Math.floor(seconds / (60 * 60)) - (day * 24)
minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
} else {
this.timeUp()
}
if (day < 10) {
day = '0' + day
}
if (hour < 10) {
hour = '0' + hour
}
if (minute < 10) {
minute = '0' + minute
}
if (second < 10) {
second = '0' + second
}
this.d = day
this.h = hour
this.i = minute
this.s = second
if(this.progressIsCallBack){
this.callBackFun('timeprogress',{day,hour,minute,second})
}
},
timeUp() {
clearInterval(this.timer)
this.callBackFun('timeup',{})
},
toSeconds(timestamp, day, hours, minutes, seconds) {
if (timestamp) {
return timestamp - parseInt(new Date().getTime() / 1000, 10)
}
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
},
}
网友评论