小程序自学系列（零基础学小程序002）---小程序实现电商秒杀倒计时效果

基本实现功能

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);
  }
});

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

更多微信小程序优秀源码：https://github.com/qiushi123/xiaochengxu_demos

也可以关注我的个人微信号，每天定期推送小程序最新开发技术，优秀源码，各种干货

关注上面微号回复1可以加千人小程序学习微信群，群里和大家交流学习，一起进步

有问题加我微信：2501902696