快捷導(dǎo)航

微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)

更新時(shí)間：2019年06月20日 16:36:30 作者：Yako元

這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)的具體代碼，供大家參考，具體內(nèi)容如下

1、展示的效果如下

2、wxml代碼：

<!--倒計(jì)時(shí) -->
<text wx:if="{{clock!=''}}">僅剩{{clock}}</text>
<text wx:if="{{clock==''}}">已經(jīng)截止</text>

3、js代碼：

在拼團(tuán)項(xiàng)目中獲取到活動(dòng)結(jié)束時(shí)間的格式為一下格式

因該格式無(wú)法正常計(jì)算時(shí)長(zhǎng)，所進(jìn)行了格式轉(zhuǎn)換new Date(that.data.collage.collage_end).getTime()

// 倒計(jì)時(shí)
function countdown(that) {
 var EndTime = new Date(that.data.collage.collage_end).getTime() || [];
 // console.log(EndTime);
 var NowTime = new Date().getTime();
 var total_micro_second = EndTime - NowTime || [];  //單位毫秒
 if (total_micro_second < 0) {
  // console.log('時(shí)間初始化小于0，活動(dòng)已結(jié)束狀態(tài)');
  total_micro_second = 1;   //單位毫秒 ------ WHY？
 }
 // console.log('剩余時(shí)間：' + total_micro_second);
 // 渲染倒計(jì)時(shí)時(shí)鐘
 that.setData({
  clock: dateformat(total_micro_second)  //若已結(jié)束，此處輸出'0天0小時(shí)0分鐘0秒'
 });
 if (total_micro_second <= 0) {
  that.setData({
   clock: "已經(jīng)截止"
  });
  return;
 }
 setTimeout(function () {
  total_micro_second -= 1000;
  countdown(that);
 }
  , 1000)
}
 
// 時(shí)間格式化輸出，如11天03小時(shí)25分鐘19秒 每1s都會(huì)調(diào)用一次
function dateformat(micro_second) {
 // 總秒數(shù)
 var second = Math.floor(micro_second / 1000);
 // 天數(shù)
 var day = Math.floor(second / 3600 / 24);
 // 小時(shí)
 var hr = Math.floor(second / 3600 % 24);
 // 分鐘
 var min = Math.floor(second / 60 % 60);
 // 秒
 var sec = Math.floor(second % 60);
 return day + "天" + hr + "小時(shí)" + min + "分鐘" + sec + "秒";
}
Page({
  onLoad: function(options) {
    wx.request({
      success: function(request) {
        // 倒計(jì)時(shí)(獲取結(jié)束時(shí)間后再進(jìn)行倒計(jì)時(shí)方法調(diào)用)
        countdown(that);
      }
    })
  }  
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: