倒數計時功能是很多網際網路產品必備的功能之一，像遊戲陪玩app原始碼中訂單的失效時間等都會用到倒數計時功能，那麼為了帶給使用者更好的使用體驗，在遊戲陪玩app原始碼開發中是如何實現倒數計時功能的呢？

程式碼實現過程

首先我們先來屢一下邏輯

把時間差轉換為天數、小時數、分鐘數和秒數在遊戲陪玩app原始碼中顯示。主要是以%取模來運算。得到剩餘結束時間的毫秒數（剩餘毫秒數），
除以 1000 得到剩餘秒數，再除以 60 得到剩餘分鐘數，再除以 60 得到剩餘小時數。除以 24 得到剩餘天數。
剩餘秒數 time/1000 % 60 得到秒數，剩餘分鐘數 time/(1000 * 60) %60 得到分鐘數，
剩餘小時數time/(1000 * 60 * 60) %24 得到小時數。
遊戲陪玩app原始碼後臺會傳一個倒數計時結束時間給你;那麼只需要那這個引數傳進我寫下面寫的方法裡面去了

HTML部分
<body>
    <div id="countdown"></div>
</body>
  
<script>
  let timer
  let timeEvent = document.getElementById("countdown");
  function countdown() {
    let nowTime = new Date(); //當前的時間
    let endTime = new Date("2021/11/02"); //結束的時間 
    //上面只是我寫死的日期,後臺傳的結束時間資料是時間戳可以省略上面一步
    
    let timeLog = endTime.getTime() - nowTime.getTime(); //時間差 
    //一步得出的時間戳是毫秒的;順便普及一下知識:10位數的時間戳是秒,13位的時間戳是毫秒;
    
    let day = Math.floor(timeLog / (1000 * 60 * 60 * 24)); //獲取天數
    let hour = Math.floor((timeLog / (1000 * 60 * 60)) % 24); //獲取小時
    let min = Math.floor((timeLog / (1000 * 60)) % 60); //獲取分鐘
    let sec = Math.floor((timeLog / 1000) % 60); // 獲取秒數
    //所以顯示資料為0時清除定時器
    if (day==0 && hour==0 && min==0 && sec == 0) {
      clearInterval(timer);
      countdown.style.display = "none";
    }
    if (day == 0) {
      return (hour<10?'0'+hour:hour) + ":" + (min<10?'0'+min:min) + ":" + (sec<10?'0'+sec:sec);
    } else {
      return (day<10?'0'+day:day) + "天" + " " + (hour<10?'0'+hour:hour) + ":" + (min<10?'0'+min:min) + ":" + (sec<10?'0'+sec:sec);
    }
  }
  //設定一個倒數計時,每秒執行一次
  timer = setInterval(() => {
    timeEvent.innerHTML = countdown();
  }, 1000);
</script>

結語:

以上便是“遊戲陪玩app原始碼是如何實現倒數計時功能的？”的全部內容了，希望這篇文章能在大家開發遊戲陪玩app原始碼時提供一些幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理

原文連結：

遊戲陪玩app原始碼開發，常用的倒數計時功能如何實現？

程式碼實現過程

結語:

相關文章