小程序倒计时实现方法

<!-- 低价秒杀 -->
<view class='con price-secondkill'>
  <view class='catename clearfix'>
    <view class='tex-01'>低价秒杀</view>
    <view class='tex-02 clearfix'>
      <view>距结束</view>
      <view class='num'>{{mkill.hou}}</view><view>:</view>
      <view  class='num'>{{mkill.min}}</view><view>:</view>
      <view class='num'>{{mkill.sec}}</view>
    </view>
    <view class='tex-03' bindtap="discountMoreTap">查看更多></view>
  </view>
  <view class='discount-list'>
  <block wx:for="{{discountList}}">
    <view class='item clearfix'>
      <view class='img'><image src='{{item.course.img}}' style='width:100%;' mode='widthFix'></image></view>
      <view class='tex'>
        <view class='tex-top'>
          <text>{{item.course.name}}</text>
          <text>{{item.course.info}}</text>    
        </view>
        <view class='texts'>
          <view class='price'>
            <text>¥{{item.price}}</text>
            <text>¥{{item.course.price_original}}</text>
          </view>
          <view class='num'>
            <button bindtap="bindCourseView" data-id="{{item.course.id}}">立即秒杀</button>
          </view>
        </view>
      </view>
    </view>
  </block>
  </view>
</view>
  /*倒计时*/
  countDown:function() {//倒计时函数
    // 获取当前时间,同时得到活动结束时间数组
    let newTime = new Date().getTime();
    let actEndTime = this.data.actEndTime.replace(/-/g, "/");
    let endTime = new Date(actEndTime).getTime();
    let obj = [];
    // 如果活动未结束,对时间进行处理
    if (endTime - newTime > 0) {
      let time = (endTime - newTime) / 1000;
      // 获取时、分、秒
      let hou = parseInt(time % (60 * 60 * 24) / 3600);
      let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
      let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
      obj = {
        hou: this.timeFormat(hou),
        min: this.timeFormat(min),
        sec: this.timeFormat(sec)
      }
    } else {//活动已结束,全部设置为'00'
      obj = {
        hou: '00',
        min: '00',
        sec: '00'
      }
    }
    // 渲染,然后每隔一秒执行一次倒计时函数
    this.setData({
      mkill: obj
    })
    setTimeout(this.countDown, 1000);
  },

需要注意苹果手机倒计时不显示,原因是:IOS不支持2019-08-28 14:01:30这种格式,只需要将 - 替换为 / 即可解决:

var remainDate = "2019-08-28 14:01:30";
var newRemainDate =  remainDate .replace(/-/g, "/")    //转换后即可兼容啦

wxss就不往外贴了,根据不同的需求,直接写样式即可

发布了42 篇原创文章 · 获赞 26 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/doukalove/article/details/100118047