您正在使用IPV4(34.204.180.223)访问本站 您本次共访问本站 1 次
用户名: 用QQ登录本站
密 码:
验证码:
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 建军节 3
2021年 七夕节 16
2022年 元 旦 156
2022年 春 节 187
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    vue实现指定日期之间的倒计时
    内容摘要: htmldivclass='time-down'divclass='back'{{dayNum}}/divdivclass='font-14date'天/divdivclass='back'{{hourNum}}/divdivclass='font-14date'时/divdivclass='back'{{minuteNum}}/divdivclass='f......
    html

    <divclass="time-down">

    <divclass="back">{{dayNum}}</div>

    <divclass="font-14date">天</div>

    <divclass="back">{{hourNum}}</div>

    <divclass="font-14date">时</div>

    <divclass="back">{{minuteNum}}</div>

    <divclass="font-14date">分</div>

    <divclass="back">{{secondNum}}</div>

    <divclass="font-14date">秒</div>

    </div>

    js

    importmomentfrom'moment';

    exportdefault{

    name:'TimeRangPage',

    props:{

    startTime:String,

    endTime:String

    },

    data(){

    return{

    days:0,

    hours:0,

    minutes:0,

    seconds:0,

    timeSetInterval:null,

    showTimeDown:false,

    showOver:false

    };

    },

    created(){

    if(moment(newDate()).isBefore(this.startTime)){

    this.showTimeDown=true;

    this.timeDown();

    }

    if(moment(newDate()).isAfter(this.endTime))this.showOver=true;

    },

    methods:{

    timeDown(){

    this.timeSetInterval=setInterval(()=>{

    if(moment(this.startTime).isBefore(moment())){

    this.showTimeDown=false;

    clearInterval(this.timeSetInterval);

    location.reload();

    }

    letdur=moment.duration(moment(this.startTime)-moment(),'ms');

    this.days=dur.get('days');

    this.hours=dur.get('hours');

    this.minutes=dur.get('minutes');

    this.seconds=dur.get('seconds');

    },1000);

    }

    },

    computed:{

    dayNum(){

    if(this.days<10)return'0'+this.days;

    returnthis.days;

    },

    hourNum(){

    if(this.hours<10)return'0'+this.hours;

    returnthis.hours;

    },

    minuteNum(){

    if(this.minutes<10)return'0'+this.minutes;

    returnthis.minutes;

    },

    secondNum(){

    if(this.seconds<10)return'0'+this.seconds;

    returnthis.seconds;

    }

    }

    };

    版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:JavaScript定时关闭网页的代码 下一篇:vue实现同时设置多个倒计时
    发布日期:2021/7/19
    手机扫二维码直达本页
    发布时间:14:54:38
    点击:106
    录入:齐天大圣
    相关文章
    Baidu

    YiJiaCMS V5.9 Build 21.7.20(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021