小程序组件之倒计时

  • • 发表于 4年前
  • • 作者 陈小术
  • • 7108 人浏览
  • • 9 条评论
  • • 最后编辑时间 2年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

在电商应用的限时团购、商品秒杀中我们通常需要用到倒计时效果,那么小程序中我们应当如何实现呢?

在聚划算中的抢购倒计时效果:

那么微信小程序中该如何实现呢?先附上效果图

源码

  • count.wxml
<view class="section" style="background-color:#DDDDDD;margin-left:20rpx;margin-right:20rpx;margin-top:20rpx" >
    <form bindsubmit="formSubmit" bindreset="formReset">
      <input name="input" style="margin-bottom:20rpx" class="c_Input" placeholder="请输入时间(单位/秒)"/>
      <button style="background-color:#0066FF;color:white" formType="submit">确定</button>
    </form>
  </view>


<text style="display: block;text-align: center;font-size: 30px;color: #f60;margin-top: 50px;">
    {{clock}} {{micro_second}}
</text>
  • count.js
/** 
 * 需要一个目标日期,初始化时,先得出到当前时间还有剩余多少秒
 * 1.将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX
 * 2.提供一个时钟,每10ms运行一次,渲染时钟,再总ms数自减10
 * 3.剩余的秒次为零时,return,给出tips提示说,已经截止
 */

// 定义一个总毫秒数,以一分钟为例。TODO,传入一个时间点,转换成总毫秒数
var total_micro_second ;

/* 毫秒级倒计时 */
function count_down(that) {
      // 渲染倒计时时钟
      that.setData({
          clock:date_format(total_micro_second)
      });

      if (total_micro_second <= 0) {
          that.setData({
              clock:"已经截止"
          });
          // timeout则跳出递归
          return ;
      }    
      setTimeout(function(){
        // 放在最后--
        total_micro_second -= 10;
        count_down(that);
    }
    ,10)
}

// 时间格式化输出,如03:25:19 86。每10ms都会调用一次
function date_format(micro_second) {
      // 秒数
      var second = Math.floor(micro_second / 1000);
      // 小时位
      var hr = Math.floor(second / 3600);
      // 分钟位
      var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
      // 秒位
    var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60;
    // 毫秒位,保留2位
    var micro_sec = fill_zero_prefix(Math.floor((micro_second % 1000) / 10));

    return hr + ":" + min + ":" + sec + " " + micro_sec;
}

// 位数不足补零
function fill_zero_prefix(num) {
    return num < 10 ? "0" + num : num
}

Page({
    data: {
        clock: ''
    },
    onLoad: function() {

    },
    formSubmit: function(event) {
        console.log(event.detail.value.input);
        total_micro_second = event.detail.value.input*1000
        count_down(this);
  },
});

实例下载

分享到:
评论区(共9条评论)
9条评论
Ctrl+Enter
作者

陈小术

陈小术

APP:1 帖子:7 回复:20 积分:3341

已加入社区[1346]天

:-)

作者详情》
Top