js時(shí)間倒計(jì)時(shí)

調(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
  },
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末恬叹,一起剝皮案震驚了整個(gè)濱河市候生,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌绽昼,老刑警劉巖唯鸭,帶你破解...
    沈念sama閱讀 217,406評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異硅确,居然都是意外死亡目溉,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門菱农,熙熙樓的掌柜王于貴愁眉苦臉地迎上來缭付,“玉大人,你說我怎么就攤上這事循未∠菝ǎ” “怎么了?”我有些...
    開封第一講書人閱讀 163,711評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵只厘,是天一觀的道長(zhǎng)烙丛。 經(jīng)常有香客問我,道長(zhǎng)羔味,這世上最難降的妖魔是什么河咽? 我笑而不...
    開封第一講書人閱讀 58,380評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮赋元,結(jié)果婚禮上忘蟹,老公的妹妹穿的比我還像新娘。我一直安慰自己搁凸,他們只是感情好媚值,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著护糖,像睡著了一般褥芒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,301評(píng)論 1 301
  • 那天锰扶,我揣著相機(jī)與錄音献酗,去河邊找鬼。 笑死坷牛,一個(gè)胖子當(dāng)著我的面吹牛罕偎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播京闰,決...
    沈念sama閱讀 40,145評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼颜及,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了蹂楣?” 一聲冷哼從身側(cè)響起俏站,我...
    開封第一講書人閱讀 39,008評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎捐迫,沒想到半個(gè)月后乾翔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,443評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡施戴,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了萌丈。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赞哗。...
    茶點(diǎn)故事閱讀 39,795評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖辆雾,靈堂內(nèi)的尸體忽然破棺而出肪笋,到底是詐尸還是另有隱情,我是刑警寧澤度迂,帶...
    沈念sama閱讀 35,501評(píng)論 5 345
  • 正文 年R本政府宣布藤乙,位于F島的核電站,受9級(jí)特大地震影響惭墓,放射性物質(zhì)發(fā)生泄漏坛梁。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評(píng)論 3 328
  • 文/蒙蒙 一腊凶、第九天 我趴在偏房一處隱蔽的房頂上張望划咐。 院中可真熱鬧,春花似錦钧萍、人聲如沸褐缠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽队魏。三九已至,卻和暖如春万搔,著一層夾襖步出監(jiān)牢的瞬間胡桨,已是汗流浹背官帘。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留登失,地道東北人遏佣。 一個(gè)月前我還...
    沈念sama閱讀 47,899評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像揽浙,于是被迫代替她去往敵國(guó)和親状婶。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評(píng)論 2 354