溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

uni-app使用countdown插件實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)功能

發(fā)布時(shí)間：2020-11-02 09:13:59 來(lái)源：億速云 閱讀：946 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

uni-app使用countdown插件實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)功能？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

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

uni-app使用countdown插件實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)功能

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

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

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

<view class="created" v-if="myData.stat == '未拍賣(mài)'">
 <span>距開(kāi)始剩</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>距開(kāi)始剩</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>

關(guān)于uni-app使用countdown插件實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)功能問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手