亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue實(shí)現(xiàn)倒計(jì)時(shí)功能

 更新時(shí)間：2021年03月18日 17:20:41   作者：程序猿余某人  
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

通過(guò)父組件傳入的結(jié)束時(shí)間減去當(dāng)前日期得到剩余時(shí)間

1.子組件部分

<div class="itemend">
 <p class="itemss">倒計(jì)時(shí)<span>{{day}}</span>天<span>{{hour}}</span>時(shí)<span>{{minute}}</span>分<span>{{second}}</span>秒</p>
</div>

代碼：

data() {
 return {
 day: "", //天
 hour: "", //時(shí)
 minute: "", //分
 second: "", //秒
 flag: false,
 };
 },
 mounted() {
 let time = setInterval(() => {
 if (this.flag == true) {
 clearInterval(time);
 }
 this.timeDown();
 }, 500);
 },
 props: {
 endTime: {
 type: String,
 },
 },
 methods: {
 timeDown() {
 const endTime = new Date(this.endTime);
 const nowTime = new Date();
 let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
 let d = parseInt(leftTime / (24 * 60 * 60));
 let h = this.formate(parseInt((leftTime / (60 * 60)) % 24));
 let m = this.formate(parseInt((leftTime / 60) % 60));
 let s = this.formate(parseInt(leftTime % 60));
 if (leftTime <= 0) {
 this.flag = true;
 this.$emit("time-end");
 }
 this.day = d; //天
 this.hour = h; //時(shí)
 this.minute = m; //分
 this.second = s; //秒
 },
 formate(time) {
 if (time >= 10) {
 return time;
 } else {
 return `0${time}`;
 }
 },
}

2.父組件引用

<template>
 <div>
 <Times :endTime='timeEnd'></Times>
 </div> 
</template>

import Times from "@/components/time";
export default {
 name: "Home",
 data() {
 return {
 timeEnd: "2021-3-30 9:50" //結(jié)束時(shí)間(蘋(píng)果手機(jī)無(wú)法解析"-" 可以將格式改為2021/3/30)
 },
 
 components: {
 Times,
 },
};

更多關(guān)于倒計(jì)時(shí)的文章請(qǐng)查看專(zhuān)題：《倒計(jì)時(shí)功能》

更多JavaScript時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專(zhuān)題

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

相關(guān)文章

最新評(píng)論