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
    评论
基于Vue数据绑定的数字时钟是一种利用Vue框架实现的动态显示时间的时钟。通过Vue的数据绑定机制,可以实时更新时钟的显示内容,使其能够自动更新。 实现基于Vue数据绑定的数字时钟的步骤如下: 1. 创建一个Vue实例,并定义一个data属性来存储当前时间。 2. 使用Vue的生命周期钩子函数created,在实例创建完成后,通过JavaScript的Date对象获取当前时间,并将其保存在data属性中。 3. 在Vue的模板中,使用双花括号语法(Mustache语法)将data属性中的时间值绑定到页面上,实现实时显示。 4. 使用JavaScript的定时器函数setInterval,每秒更新一次data属性中的时间值,从而实现时钟的动态更新。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>Vue数字时钟</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="clock"> <h1>{{ currentTime }}</h1> </div> <script> new Vue({ el: '#clock', data: { currentTime: '' }, created: function() { this.updateTime(); setInterval(this.updateTime, 1000); }, methods: { updateTime: function() { var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); this.currentTime = hours + ':' + minutes + ':' + seconds; } } }); </script> </body> </html> ``` 通过上述代码,我们可以实现一个基于Vue数据绑定的数字时钟。每秒钟,时钟会自动更新显示当前的时间。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值