調(diào)用的時(shí)候看你有哪些數(shù)據(jù),然后調(diào)用不同的方法拷呆。
1闲坎、已有倒計(jì)時(shí)天,小時(shí)茬斧,分鐘腰懂,秒調(diào)用startData方法
2、已有當(dāng)前時(shí)間和目標(biāo)時(shí)間調(diào)用initData
上面兩個(gè)方法的參數(shù)有個(gè)callBack需要你傳入一個(gè)方法啥供,用來接收倒計(jì)時(shí)通知悯恍,會(huì)返回兩個(gè)數(shù)據(jù):
屬性名 | 類型 | 說明 |
---|---|---|
status | String | 倒計(jì)時(shí)狀態(tài) timeprogress:進(jìn)行中 / timeup:結(jié)束 |
values | Object | 進(jìn)行中狀態(tài)下返回天,小時(shí)伙狐,分鐘涮毫,秒瞬欧,結(jié)束狀態(tài)下返回空對(duì)象 |
/**
* js倒計(jì)時(shí)對(duì)象
*/
let countdownObj = {
timer: null,
syncFlag: false,
d: '00',
h: '00',
i: '00',
s: '00',
leftTime: 0,
seconds: 0,
progressIsCallBack:true,
callBackFun:null,
/**
* 時(shí)間需要處理,根據(jù)格林威治初始化
* @param {*} callBack 結(jié)束時(shí)需要調(diào)用的方法
* @param {*} endTime 目標(biāo)時(shí)間
* @param {*} serverDate 獲取的服務(wù)器當(dāng)前時(shí)間
*/
initData(callBack,endTime,serverDate){
let targetTime = Date.parse(endTime);
let serverTime = Date.parse(serverDate); // 請(qǐng)求服務(wù)端接口罢防,返回服務(wù)器當(dāng)前時(shí)間戳
let localTime = this.getNowDate(8); // 用戶本地時(shí)間戳
let timeOff = serverTime - localTime;
let rightTargetTime = targetTime - timeOff; // 去除偏差后的目標(biāo)時(shí)間
let newDate = this.getTimeDifference(serverDate,rightTargetTime);
this.startData(callBack,newDate.day,newDate.hour,newDate.minute,newDate.second);
},
/**
* 倒計(jì)時(shí)起始方法(傳入天艘虎,小時(shí),分鐘咒吐,秒)
* @param {*} callBack 結(jié)束時(shí)需要調(diào)用的方法
* @param {*} day 倒計(jì)時(shí)天
* @param {*} hour 倒計(jì)時(shí)小時(shí)
* @param {*} minute 倒計(jì)時(shí)分鐘
* @param {*} second 倒計(jì)時(shí)秒
* @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)
},
/**
* 返回天時(shí)分鐘秒
* @param {*} startDateString 當(dāng)前時(shí)間
* @param {*} endDateString 目標(biāo)時(shí)間
* @returns
*/
getTimeDifference(startDateString, endDateString) {
var start = new Date(startDateString); // 開始日期
var end = new Date(endDateString); // 結(jié)束日期
var timeDiffInMs = Math.abs(end - start); // 獲取時(shí)間差(單位為毫秒)
var diffDays = Math.floor(timeDiffInMs / (1000 * 3600 * 24)); // 計(jì)算天數(shù)
var diffHours = Math.floor((timeDiffInMs % (1000 * 3600 * 24)) / (1000 * 3600)); // 計(jì)算小時(shí)數(shù)
var diffMinutes = Math.floor((timeDiffInMs % (1000 * 3600)) / (1000 * 60)); // 計(jì)算分鐘數(shù)
var diffSeconds = Math.floor((timeDiffInMs % (1000 * 60)) / 1000); // 計(jì)算秒數(shù)
return {
day:diffDays,
hour:diffHours,
minute:diffMinutes,
second:diffSeconds
}
},
/**
* 本地時(shí)間
* @param {*} timeZone
* @returns
*/
getNowDate(timeZone) {
var timezone = timeZone || 8; //目標(biāo)時(shí)區(qū)時(shí)間野建,東八區(qū)
// 本地時(shí)間和格林威治的時(shí)間差,單位為分鐘
var offset_GMT = new Date().getTimezoneOffset();
// 本地時(shí)間距 1970 年 1 月 1 日午夜(GMT 時(shí)間)之間的毫秒數(shù)
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
},
}