快捷導(dǎo)航

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

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

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

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

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

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

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

在需要使用倒計(jì)時(shí)的頁面引入組件

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

在頁面中放置定時(shí)器的位置

<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>

計(jì)算定時(shí)器中綁定的時(shí)間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+'時(shí)'+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)前時(shí)間與1970年1月1日時(shí)間相差的毫秒數(shù)
  var star = this.myData.startTime
  var endDate = new Date(star); 
  var end = endDate.getTime();//結(jié)束時(shí)間與1970年1月1日時(shí)間相差的毫秒數(shù)
  var leftTime = end-now;//計(jì)算兩日期之間相差的毫秒數(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+'時(shí)'+this.m+'分'+this.s+'秒')
  }
      }
    },
 components:{
  uniCountdown
 }
 }
</script>

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

您可能感興趣的文章: