小程序自學系列（零基礎學小程序002）---小程序?qū)崿F(xiàn)電商秒殺倒計時效果

基本實現(xiàn)功能

1，小程序仿電商網(wǎng)站秒殺倒計時

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

3，秒殺時間結(jié)束后提示 秒殺結(jié)束

先看效果圖

其實實現(xiàn)挺簡單

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

// indes.js
/** 
 * 需要一個目標日期，初始化時，先得出到當前時間還有剩余多少秒
 * 1.將秒數(shù)換成格式化輸出為XX天XX小時XX分鐘XX秒 XX
 * 2.提供一個時鐘，每10ms運行一次，渲染時鐘，再總ms數(shù)自減10
 * 3.剩余的秒次為零時，return，給出tips提示說，已經(jīng)截止
 */
 
// 定義一個總毫秒數(shù)，以一天為例
// 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:"秒殺結(jié)束"
     });
     // timeout則跳出遞歸
     return ;
   }  

   //settimeout實現(xiàn)倒計時效果
   setTimeout(function(){
    // 放在最后--
    total_micro_second -= 10;
    countdown(that);
  }
  ,10)//注意毫秒的步長受限于系統(tǒng)的時間頻率，于是我們精確到0.01s即10ms
}
 
// 時間格式化輸出，如1天天23時時12分分12秒秒12 。每10ms都會調(diào)用一次
function dateformat(micro_second) {
   // 總秒數(shù)
   var second = Math.floor(micro_second / 1000);
   // 天數(shù)
   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);
  }
});

源碼地址：http://download.csdn.net/detail/qiushi_1990/9693488

更多微信小程序優(yōu)秀源碼：https://github.com/qiushi123/xiaochengxu_demos

也可以關注我的個人微信號，每天定期推送小程序最新開發(fā)技術(shù)，優(yōu)秀源碼，各種干貨

關注上面微號回復1可以加千人小程序?qū)W習微信群，群里和大家交流學習，一起進步

有問題加我微信：2501902696