vue实现倒计时功能

本文实例为大家分享了vue实现倒计时功能的具体代码，供大家参考，具体内容如下

通过父组件传入的结束时间减去当前日期得到剩余时间

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" //结束时间(苹果手机无法解析"-" 可以将格式改为2021/3/30) }
,  components: {
 Times, }
,}
    ;
    

更多关于倒计时的文章请查看专题：《倒计时功能》

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• Vue写一个简单的倒计时按钮功能
• 简单实现vue验证码60秒倒计时功能
• vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
• 基于vue的短信验证码倒计时demo
• vue实现验证码按钮倒计时功能
• vue中多个倒计时实现代码实例
• vue实现商城秒杀倒计时功能
• vue实现倒计时获取验证码效果
• vue设计一个倒计时秒杀的组件详解
• Vue验证码60秒倒计时功能简单实例代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！