微信小程序动态显示项目倒计时效果

Posted 2020-11-02 Faded露露

效果：

wxml代码：

　　　　

<view class=\'spellNum\'>
  <view>
    <text style=\'color: #fff;\'>团长</text>
    <image src=\'{{shift}}\'></image>
  </view>
  <image wx:for="{{head}}" src=\'{{item.buyer_avatar}}\'></image>
  <view wx:if="{{num==1}}" style=\'text-align:center\'>
    <text style=\'font-size:30rpx;color:#000;line-height:66rpx\'>仅剩<text style=\'color:red\'> {{surplus}} </text>个名额 \\n</text>
    <view>拼团
      <text style=\'color:red\'> {{clock}} {{micro_second}}</text> 后结束</view>
  </view>
</view>

js文件代码：

// pages/spell/spell.js
let app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    clock: \'\',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this// 参团人数
    wx.request({
      url: app.baseURL + "act=goods&op=group_info",
      data: {
        appid: app.appid,
        groupbuy_id: options.groupbuy_id,
        goods_id: options.goods_id
      },
      header: {
        "content-type": "application/json"
      },
      success: res => {
        console.log(res);
        let date = res.data.datas.end_time
        console.log(\'date\'+date)
        let thisDate = Math.round(new Date() / 1000)

        console.log(\'thisDate\'+thisDate)
        total_micro_second = date - thisDate
        console.log(\'total_micro_second\'+total_micro_second)

        count_down(that);
       
      
    })


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

console.log(total_micro_second);

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

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

// 时间格式化输出，如03:25:19 86。每10ms都会调用一次
// function dateformat(micro_second) {
//   // 秒数
//   var second = Math.floor(micro_second / 1000);
//   // 小时位
//   var hr = fill_zero_prefix(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;
// }

function dateformat(micro_second) {

  // 总秒数
  //var second = Math.floor(micro_second / 1000);
  var second = micro_second ;
  // 天数
  var day = Math.floor(second / 3600 / 24);
  // 小时
  var hr = Math.floor(second / 3600 % 24);
  // 分钟
  var min = Math.floor(second / 60 % 60);
  // 秒
  var sec = Math.floor(second % 60);
  return day + "天" + hr + "小时" + min + "分钟" + sec + "秒";
}

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