欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實現(xiàn)倒計時功能

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

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

通過父組件傳入的結(jié)束時間減去當前日期得到剩余時間

1.子組件部分

<div class="itemend">
 <p class="itemss">倒計時<span>{{day}}</span>天<span>{{hour}}</span>時<span>{{minute}}</span>分<span>{{second}}</span>秒</p>
</div>

代碼:

data() {
 return {
 day: "", //天
 hour: "", //時
 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; //時
 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é)束時間(蘋果手機無法解析"-" 可以將格式改為2021/3/30)
 },
 
 components: {
 Times,
 },
};

更多關(guān)于倒計時的文章請查看專題:《倒計時功能》

更多JavaScript時鐘特效點擊查看:JavaScript時鐘特效專題

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

相關(guān)文章

最新評論