使用JS创建一个实时动态的时钟

项目中有个小组件是一个实时动态的时钟，虽然很简单，但是我把代码分享出来，以后也能直接拿来用。（解决了setInterval只执行一次的问题）

设计图

需求是如图所示的一个时钟组件：

组件设计

思路原理

其实很简单，就是通过js获取当前时间的具体值（年月日时分秒）
再使用定时器，每一秒执行一次

代码

代码分定时器和获取信息两部分。

获取当前时间信息

let dateTime = new Date(); //表示当前系统时间的Date对象 
let year = dateTime.getFullYear(); //当前系统时间的完整年份值
let month = dateTime.getMonth()+1; //当前系统时间的月份值 
let date = dateTime.getDate(); //当前系统时间的月份中的日
let day = dateTime.getDay(); //当前系统时间中的星期值
let weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
let week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串 
let hour = dateTime.getHours(); //当前系统时间的小时值 
let minute = dateTime.getMinutes(); //当前系统时间的分钟值
let seconds = dateTime.getSeconds(); //当前系统时间的秒钟值
//如果月、日、小时、分、秒的值小于10，在前面补0
if(month<10){
    month = "0"+month;
}
if(date<10){
    date = "0"+date;
}
if(hour<10){
    hour = "0"+hour;
}
if(minute<10){
    minute = "0"+minute;
}
if(seconds<10){
    seconds = "0"+seconds;
}

通过以上代码就可以获取具体的当前时间信息

定时器

我把获取信息的方法命名为initClock，在VUE的mounted部分执行定时器，每秒执行一次。

setInterval(this.initClock, 1000);//开始时钟功能

注意事项

注意注意

此处有坑啊，大家注意！

有的人会发现写完之后自己的定时器只执行了一次，就再也没有然后了...（我就是其中之一）

请看一下你的代码一定是这样写的：

setInterval(this.initClock(), 1000);//开始时钟功能

initClock()这是一个函数调用，函数调用就会有返回值，而initClock()没有返回值，所以这里的initClock()是一个undefined，自然你想要的循环执行initClock()这个函数就不会发生。

更改为：

setInterval(this.initClock, 1000);//开始时钟功能

这样就可以运行了。

效果图

为了时钟的动态实时效果看起来更明显，我添加了秒数和日期（星期）

效果图