手写场景 | 实现时间动态显示

Posted on In Symbols count in article: 1.2k Reading time ≈ 1 mins.

实现需求

在页面上动态显示当前时间

实现思路

  1. getCurrentTime函数——Date.now()获取时间 + 显示页面
  2. formatDate函数——修改时间格式
  3. setInterval——每秒调用getCurrentTime函数

代码实现

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
32
<div>
    <h1 class="title">currentTime:</h1>
	<h1 id="container"></h1>
</div>
<script>
// 定时器实现每秒请求获取函数，并且写入h1中
setInterval(getCurrentTime, 1000);
// 获取当前时间
function getCurrentTime() {
    const container = document.getElementById('container');
    const currentTime = formateDate(Date.now());
    container.innerHTML = currentTime;
}

// 修改时间格式
function formateDate(date) {
    let dateChange = new Date(date);
    let year = dateChange.getFullYear();
    let month = dateChange.getMonth() + 1;
    month = month < 10 ? '0' + month : month;
    let day = dateChange.getDate();
    day = day < 10 ? '0' + day : day;
    let hour = dateChange.getHours();
    hour = hour < 10 ? '0' + hour : hour;
    let minute = dateChange.getMinutes();
    minute < 10 ? '0' + minute : minute;
    let second = dateChange.getSeconds();
    second < 10 ? '0' + second : second;
    let final = `${year}/${month}/${day} ${hour}:${minute}:${second}`;
    return final;
}
</script>

知识补充

setInterval() 第一个参数的用法

手写场景 | setTimeout实现setInterval