uni-app使用countdown插件實現(xiàn)倒計時

更新時間：2020年11月01日 13:24:49 作者：Laladoge

這篇文章主要為大家詳細介紹了uni-app使用countdown插件實現(xiàn)倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了使用countdown插件實現(xiàn)倒計時的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)的效果如下：

這里實現(xiàn)的是一個活動倒計時，獲取當(dāng)前時間和活動開始時間，相減得出的時間差就是我們需要的倒計時。使用插件很方便。

首先新建一個項目，選擇uni-app，模板選擇hello-uniapp，里面有官網(wǎng)的組件可以直接使用。創(chuàng)建之后將components整個文件夾復(fù)制到自己的項目中。

在需要使用倒計時的頁面引入組件

<script>
 import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
 export default {
 data() {
  return {
  d:'',
  h:'',
  m:'',
  n:''
  }
 },
 
 components:{
  uniCountdown
 }
 }
</script>

在頁面中放置定時器的位置

<view class="created" v-if="myData.stat == '未拍賣'">
 <span>距開始剩</span>
 <span class="timer">
    <uni-countdown :day="d" :hour="h" :minute="m" :second="s"></uni-countdown>
  </span>
</view>

計算定時器中綁定的時間d,h,m,s

var date = new Date();
  var now = date.getTime();
  var star = this.myData.startTime
  var endDate = new Date(star); 
  var end = endDate.getTime(); 
  var leftTime = end-now;
  if (leftTime >= 0) {
 this.d = Math.floor(leftTime/1000/60/60/24); 
 this.h = this.myData.validTime+Math.floor(leftTime/1000/60/60%24); 
 this.m = Math.floor(leftTime/1000/60%60); 
 this.s = Math.floor(leftTime/1000%60);
 console.log(this.d+'天'+this.h+'時'+this.m+'分'+this.s+'秒')
}

完整代碼：

<template>
  <view class="created">
 <span>距開始剩</span>
 <span class="timer">
      <uni-countdown :day="d" :hour="h" :minute="m" :second="s"></uni-countdown>        
    </span>
 </view>
</template>
<script>
 import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
 export default {
 data() {
  return {
  d:'',
  h:'',
  m:'',
  n:'',
  }
 },
 onLoad(option){
  this.init()
 },
 
 methods: {
  init(){
        var date = new Date();
  var now = date.getTime();//獲得當(dāng)前時間與1970年1月1日時間相差的毫秒數(shù)
  var star = this.myData.startTime
  var endDate = new Date(star); 
  var end = endDate.getTime();//結(jié)束時間與1970年1月1日時間相差的毫秒數(shù)
  var leftTime = end-now;//計算兩日期之間相差的毫秒數(shù)
  if (leftTime >= 0) {
   this.d = Math.floor(leftTime/1000/60/60/24);
   this.h = Math.floor(leftTime/1000/60/60%24); 
   this.m = Math.floor(leftTime/1000/60%60); 
   this.s = Math.floor(leftTime/1000%60);
   console.log(this.d+'天'+this.h+'時'+this.m+'分'+this.s+'秒')
  }
      }
    },
 components:{
  uniCountdown
 }
 }
</script>

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

您可能感興趣的文章: