uni-app使用countdown插件實(shí)現(xiàn)倒計(jì)時(shí)
本文實(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)開(kāi)始時(shí)間，相減得出的時(shí)間差就是我們需要的倒計(jì)時(shí)。使用插件很方便。
首先新建一個(gè)項(xiàng)目，選擇uni-app，模板選擇hello-uniapp，里面有官網(wǎng)的組件可以直接使用。創(chuàng)建之后將components整個(gè)文件夾復(fù)制到自己的項(xiàng)目中。
在需要使用倒計(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 == '未拍賣'">
<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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
動(dòng)態(tài)添加option及createElement使用示例
動(dòng)態(tài)添加option在某些特殊的情況下還是比較實(shí)用的，本文有個(gè)小示例為大家介紹下createElement使用，感興趣的朋友可以參考下2014-01-01
ES6 Symbol在對(duì)象中的作用實(shí)例分析
這篇文章主要介紹了ES6 Symbol在對(duì)象中的作用,結(jié)合實(shí)例形式分析了ES6 Symbol在對(duì)象中聲明、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-06-06
xmlplus組件設(shè)計(jì)系列之選項(xiàng)卡（Tabbar)（5）
xmlplus 是一個(gè)JavaScript框架，用于快速開(kāi)發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus組件設(shè)計(jì)系列之選項(xiàng)卡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
JS實(shí)現(xiàn)讀取xml內(nèi)容并輸出到div中的方法示例
js如何實(shí)現(xiàn)點(diǎn)擊標(biāo)簽文字，文字在文本框出現(xiàn)
js將table的每個(gè)td的內(nèi)容自動(dòng)賦值給其title屬性的方法
Perl Substr()函數(shù)及函數(shù)的應(yīng)用
鼠標(biāo)懸浮在樹(shù)組件節(jié)點(diǎn)上展示當(dāng)前節(jié)點(diǎn)名稱的三種實(shí)現(xiàn)方式