小程序倒計時實現方法

<!-- 低價秒殺 -->
<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就不往外貼了,根據不同的需求,直接寫樣式即可

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章