前端（五）：实时获取当前时间并渲染到页面上

获取时间

• 函数

• 代码示例

 const now = new Date();

        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        const formattedDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
        const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;

        console.log(formattedDate, formattedTime);
1
2
3
4
5
6
7
8
9
10
11
12
13

• 效果展示

更新时间

• 函数

• 代码示例

        setInterval(() => {    
        const now = new Date();

        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        const formattedDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
        const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;

        console.log(formattedDate, formattedTime);
    }, 1000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 效果展示

页面渲染

• 函数

• 代码示例

        setInterval(() => {    
        const now = new Date();

        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        const formattedDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
        const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        
        // document.write(`${formattedDate} ${formattedTime}`);
        document.body.innerHTML = `<span style="color: blue;">${formattedDate} ${formattedTime}</span>`;
        // document.body.innerText = `${formattedDate} ${formattedTime}`;
        // document.body.innerText = `<span style="color: red;">${formattedDate} ${formattedTime}</span>`;

        console.log(formattedDate, formattedTime);
        }, 1000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• 效果展示