vue 数字日期时钟

所需要的时间日期的效果如图所示:

1.首先在return中定义两个字段用来存放时间和日期,需要显示星期几的需要加上week数组;

return{
    time:'',
    date:'',
    week:['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
}

2.在methods中编写获取的时间函数:

methods:{
    dateTime:function(){
        setInterval(() => {//定时器,每个一秒调用一次(这样就可以看到每一秒的时间变动啦)
            var newtime = new Date();
            this.time = this.getIncrease(newtime.get(), 2) + ':' + this.getIncrease(newtime.getMinutes(), 2) + ':' + this.getIncrease(newtime.getSeconds(), 2);
            this.date = this.getIncrease(newtime.getFullYear(), 4) + '-' + this.getIncrease(newtime.getMonth()+1, 2) + '-' + this.getIncrease(newtime.getDate(), 2) + ' ' + this.week[newtime.getDay()];
        },1000);
    },
    getIncrease:function(num, digit){
        var increase = '';
        for(var i = 0; i < digit; i++){
            increase += '0';
        }
        return (increase +num).slice(-digit);
    }
}

函数说明:

getHours() :返回 Date 对象的小时 (0 ~ 23)
getMinutes() :返回 Date 对象的分钟 (0 ~ 59)
getSeconds() :返回 Date 对象的秒数 (0 ~ 59)
setFullYear() :设置 Date 对象中的年份(四位数字)
getMonth() :从Date 对象返回月份 (0 ~ 11)
getDate() :从Date 对象返回一个月中的某一天 (1 ~ 31) 

根据网上大佬的文章翻译成自己需要的,附上大佬链接:https://www.cnblogs.com/1138720556Gary/p/9381643.html

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值