zoukankan      html  css  js  c++  java
  • 微信小程序动态显示项目倒计时效果

    效果:

    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>个名额 
    </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
    }
  • 相关阅读:
    开源数据访问组件Smark.Data 1.8
    .NET应用加载容器KGlue
    TCP&UDP压力测试工具
    使用Beetle.Express简单构建高吞吐的TCP&UDP应用
    通过分析内存来优化.NET程序
    winsock I/O模型
    C++各大有名库的介绍
    深入研究 STL Deque 容器An InDepth Study of the STL Deque Container (By Nitron)
    C C++编程子资料库(小程序)
    VSS服务器安装配置(比较完整的一篇VSS服务器配置的文章)
  • 原文地址:https://www.cnblogs.com/dalulu/p/8992235.html
Copyright © 2011-2022 走看看