• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

效果:

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
}

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序-setData:key的几种用法发布时间:2022-07-18
下一篇:
微信小程序项目,实现图书搜索高阶组件:发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap