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

基本實(shí)現(xiàn)功能

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

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

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

先看效果圖

其實(shí)實(shí)現(xiàn)挺簡(jiǎn)單

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

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

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

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

關(guān)注上面微號(hào)回復(fù)1可以加千人小程序?qū)W習(xí)微信群，群里和大家交流學(xué)習(xí)，一起進(jìn)步

有問題加我微信：2501902696