【vuejs】有关UI框架“ydui”中的倒计时组件的使用

本文介绍了两种使用倒计时组件的方法:直接设置时间和通过时间戳进行设置。提供了具体示例代码,包括如何利用moment.js获取当前时间戳,并计算到指定时间的倒计时。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第一种方法:当time直接设置为时间的时候
<template>
    <yd-countdown time="2018/06/06 06:06:06"></yd-countdown>
</template>

这里的时间就可以按照所定义的格式直接写了。

第二种使用方法:当time设置为时间戳的时候
<template>
    <yd-countdown :time="countDown" timetype="second" :callback="afterCountDown"></yd-countdown>
</template>
<script>
    export default{
        data(){
            return{
                countDown:10000,//默认值
            }
        },
        methods:{
            afterCountDown:function(){
                //这是一个倒计时结束回调
            },
            getCountDown:function(){
                //倒计时主要是记载当前时间到第二天6点的倒计时,这里用时间戳来进行倒计时,也就是上面timetype=second
                //首先得到当前时间戳,这里我们用moment.js,假装已经配置好了moment
                var currentTimeStamp = this.$moment().format("X");//根据momentjs的官方文档,format里面填写大写的X就标明得到就是当前时间戳

                this.$moment().local("zh-ch")
                var tomorrow = this.$moment().add(1,"day").format("YYYY年MM月D日 dddd");//首先,add方法,是加指定的天数,我写的1就是加一天,然后格式化成 例(2018年07月13日 星期五)格式   如果上面不写语言的话,最后的星期是英文格式的
                //然后再来设置指定时间
                tomorrow.setHour(06);
                tomorrow.setMinute(00);
                tomorrow.setSecond(00);
                //然后再格式化
                var tomorrowTimestamp = tomorrw.format("X");

                var countDown = tomorrowTimestamp - currentTimeStamp;
                this.countDown = countDown;

                //这样就能成功的倒计时了。

            }
        }
    }
</script>

这里面,倒计时结束后的时间是可以自己更换的。在组件上直接dont-text=”“就行。
比如:

<template>
    <yd-countdown time="2018/06/06 06:06:06" dont-text="结束啦"></yd-countdown>
</template>

这么写的话,最后倒计时结束后,文字就会变成“结束啦”三个字啦

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萌村村花杨小花

谢谢大佬!!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值