微信小程序倒计时

时间：2023-03-09 08:19:04
微信小程序倒计时

今天做程序要做个限时抢购的功能如图：

微信小程序倒计时

先上代码：

源码

index.wxml    可根据自己实际需求改改

<view class="div-content-warp">

            <block wx:for="{{xsqg}}" wx:key="*this">

                <view class="div-qgcontent">

                    <view class='img-absolute'>

                        <view class='red padtop10'>

                            <image class='time-img' src="../../image/img/time.png"></image>

                            <text class='time'> {{clock[index]}} </text>

                        </view>

                        <view class="category-url" bindtap="cateTap" data-cateId="{{item.id}}">

                            <image class="img-limet" src="../../image/img/xian1.png"></image>

                            <image class="shop" src="{{item.pic}}"></image>

                            <view class='del'>原价:{{item.yj}}</view>

                            <view class='red qgj'>抢购价:{{item.lowest}}</view>

                        </view>

                    </view>

                </view>

            </block>

        </view>
由于 他是4个倒计时并且每个还是单独的倒计时 所以用了数组  在循环的时候通过数组的key取值 {{clock[index]}} 
index.js
Page({

  data: {

    clock: []

  },

  onLoad: function (options) {

    var that = this;

    util.http("https://www.***.com/index.html", "", this.product);

  },

  product: function (data) {

    console.log(data);

    this.setData({

      xsqg: data.xsqg

    })

    var interval = setInterval(function () {
      //将时间传如 调用

      var clock = forea(data.xsqg);

      this.setData({//正常倒计时

        clock: clock

      });

    }.bind(this), 1000);

  }

})

function forea(timetot) {

  var clockarr = [];

  var timenow = Date.parse(new Date()) / 1000;

  for (var i = 0; i < 4; i++) {

    var totalSecond = timetot[i].end_time - timenow;

    var totalstart = timetot[i].start_time - timenow;

    if (totalstart > 0) {

      var time = '未开始';

    } else if (totalSecond < 0) {

      var time = '已结束';

    } else {

      var time = dateformat(totalSecond);

    }

    clockarr.push(time);

  }

  return clockarr;

}

// 时间格式化输出，将时间戳转为 倒计时时间

function dateformat(micro_second) {

  var second = micro_second;//总的秒数

  // 天数位

  var day = Math.floor(second / 3600 / 24);

  var dayStr = day.toString();

  if (dayStr.length == 1) dayStr = '0' + dayStr;

  // 小时位

  //var hr = Math.floor(second / 3600 % 24);

  var hr = Math.floor(second / 3600);  //直接转为小时 没有天 超过1天为24小时以上

  var hrStr = hr.toString();

  if (hrStr.length == 1) hrStr = '0' + hrStr;

  // 分钟位

  var min = Math.floor(second / 60 % 60);

  var minStr = min.toString();

  if (minStr.length == 1) minStr = '0' + minStr;

  // 秒位

  var sec = Math.floor(second % 60);

  var secStr = sec.toString();

  if (secStr.length == 1) secStr = '0' + secStr;

  return hrStr + ":" + minStr + ":" + secStr;

}

难点就是一个的话好控制，4个需要同时倒计,怎么才能同时刷？？

思路：

将倒计时的时间放入数组封装成方法  然后用  setInterval调用每1000毫秒调用一次。

在做的过程中出现的问题：

（1）把for 循环写在了setInterval 中只执行一次 不知道为什么

（2）数组每次都循环但是 数组里面的值不变？？ 后来把他单独摘出来 分开调用


有不对的地方，大家批评指正。

相关文章