用php做动态时钟,vue实现动态时钟以及日期

最近一直在做大屏幕软件的开发工作，发现这个时钟这个需求经常用到，虽然也不难，但为了以后再遇到这种需求不重复造轮子，所以写在博客记录一下，下次再遇到，嘿嘿，直接复制就完事了。其实实现动态时钟简单的来说应该是写一个定时器，每秒去获取系统时间，然后再更新，就达到了时间一直在走的效果了。

上面就是我需要用到这种需求的场景，也就是实时更新时间嘛。

export default{

data(){

return{

date: ”,

time: ”,

}

},

mounted() {

this.getdate();

this.timer = setInterval(() => {

this.getdate();

}, 3000)

},

methods:{

getdate: function() {

let weeks = [‘星期日’, ‘星期一’, ‘星期二’, ‘星期三’, ‘星期四’, ‘星期五’, ‘星期六’];

let time = new Date();

let year = time.getFullYear();

let month = time.getMonth() + 1;

let day = time.getDate();

let week = weeks[time.getDay()];

this.getTime();

this.date = year + ‘/’ + month + ‘/’ + day + ” ” + week;

},

getTime: function() {

let time = new Date();

let hour = time.getHours();

let minutes = time.getMinutes();

if(minutes

minutes=’0’+minutes

}

this.time = hour + “：” + minutes

},

}

}

从代码可以很简单的看出有两个变量，time代表时间；date代表日期。

文章知识点与官方知识档案匹配，可进一步学习相关知识Vue入门技能树首页概览23418 人正在系统学习中 相关资源：电子礼金簿Ver1.5-管理软件其他资源-CSDN文库