溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
uni-app使用countdown插件實現一個倒計時功能？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
首先新建一個項目，選擇uni-app，模板選擇hello-uniapp，里面有官網的組件可以直接使用。創建之后將components整個文件夾復制到自己的項目中。
在需要使用倒計時的頁面引入組件
<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();//獲得當前時間與1970年1月1日時間相差的毫秒數
var star = this.myData.startTime
var endDate = new Date(star);
var end = endDate.getTime();//結束時間與1970年1月1日時間相差的毫秒數
var leftTime = end-now;//計算兩日期之間相差的毫秒數
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>關于uni-app使用countdown插件實現一個倒計時功能問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
