前端实现个时间刷新的案例：
标签
1
2
| <div style="color:brown; font-size: 1.25rem /* 20/16 */;text-align: right;padding-right: 2.1875rem /* 35/16 */;;">
{{ dataForm.currentTime }}</div>
|
script
1
2
3
4
5
6
7
8
9
10
| const updateTime = () => {
const currentDate = new Date();
const year = String(currentDate.getFullYear());
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const date = String(currentDate.getDate()).padStart(2, '0');
const hours = String(currentDate.getHours()).padStart(2, '0');
const minutes = String(currentDate.getMinutes()).padStart(2, '0');
const seconds = String(currentDate.getSeconds()).padStart(2, '0');
dataForm.currentTime = `${year}年${month}月${date}日 ${hours}:${minutes}:${seconds}`;
};
|
这里主要调用的是 Date();的前端的方法。
然后我们设置定时器一秒刷新一次。
1
2
3
| setInterval(() => {
updateTime();
}, 1000);
|
这是根据人人开源项目做二次开发写的，其实二次开发真的有些难受。
如果要根据vue的方式来写就是这样的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <script>
export default {
data() {
return {
currentTime: ''
};
},
mounted() {
// 更新时间
this.updateTime();
// 每秒钟更新一次时间
setInterval(() => {
this.updateTime();
}, 1000);
},
methods: {
updateTime() {
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const day = String(currentDate.getDate()).padStart(2, '0');
const hours = String(currentDate.getHours()).padStart(2, '0');
const minutes = String(currentDate.getMinutes()).padStart(2, '0');
const seconds = String(currentDate.getSeconds()).padStart(2, '0');
this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
}
};
</script>
|
在mounted生命周期钩子中，我们通过调用updateTime方法来初始化时间，并使用setInterval函数每秒钟更新一次时间。
updateTime方法会获取当前时间并更新currentTime的值，然后将其显示在页面中。
getYear方法返回的是四位数的年份，getMonth方法返回的是从0开始的月份（需要加1），getDate方法返回的是月份中的日期。我们将它们转换为字符串并使用padStart方法进行补零操作，以保证两位数的格式。
最后，我们将年、月、日、时、分和秒拼接为一个完整的日期时间字符串，并将其赋值给currentTime，用于在页面中显示。
其中有个点就是在获取日期时，getDay()方法返回的是星期几（0-6），而不是日期。今天就犯糊涂了，用了getday()
另外推荐一个很好的拟态风格的css生成网站，简直不要太好用！！！！
https://neumorphism.io/#e0e0e0
