基本實現功能

1，小程式仿電商網站秒殺倒計時

2，顯示格式為：例如 1天11時11分11秒11

3，秒殺時間結束後提示 秒殺結束

先看效果圖

其實實現挺簡單

<!--index.wxml-->
<view class="container">
<text >秒殺: {{clock}}</text>
<text>{{micro_second}}</text>
</view>

// indes.js
/** 
 * 需要一個目標日期，初始化時，先得出到當前時間還有剩餘多少秒
 * 1.將秒數換成格式化輸出為XX天XX小時XX分鐘XX秒 XX
 * 2.提供一個時鐘，每10ms執行一次，渲染時鐘，再總ms數自減10
 * 3.剩餘的秒次為零時，return，給出tips提示說，已經截止
 */
 
// 定義一個總毫秒數，以一天為例
// var total_micro_second = 3600 * 1000*24;//這是一天倒計時
var total_micro_second = 10 * 1000;//這是10秒倒計時
 
/* 毫秒級秒殺倒計時 */
function countdown(that) {
   // 渲染倒計時時鐘
   that.setData({
     clock:dateformat(total_micro_second)//格式化時間
   });
 
   if (total_micro_second <= 0) {
     that.setData({
       clock:"秒殺結束"
     });
     // timeout則跳出遞迴
     return ;
   }  

   //settimeout實現倒計時效果
   setTimeout(function(){
    // 放在最後--
    total_micro_second -= 10;
    countdown(that);
  }
  ,10)//注意毫秒的步長受限於系統的時間頻率，於是我們精確到0.01s即10ms
}
 
// 時間格式化輸出，如1天天23時時12分分12秒秒12 。每10ms都會呼叫一次
function dateformat(micro_second) {
   // 總秒數
   var second = Math.floor(micro_second / 1000);
   // 天數
   var day = Math.floor(second / 3600/24);
   // 總小時
   var hr = Math.floor(second / 3600);
   // 小時位
   var hr2 = hr%24;
   // 分鐘位
   var min = Math.floor((second - hr * 3600) / 60);
   // 秒位
  var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
  // 毫秒位，保留2位
  var micro_sec = Math.floor((micro_second % 1000) / 10);
  return day+"天"+hr2 + "時" + min + "分" + sec + "秒" + micro_sec;
}
 
Page({
  data: {
    clock: ''
  },
  onLoad: function() {
    countdown(this);
  }
});
 

也可以關注我的個人微訊號，每天定期推送小程式最新開發技術，優秀原始碼，各種乾貨

關注上面微號回覆1可以加千人小程式學習微信群，群裡和大家交流學習，一起進步

有問題加我微信：2501902696