当前位置：首页 > article >正文

动态时间【JavaScript】

article 2024/11/15 4:56:06

这个代码实现了一个动态显示当前日期和时间的功能。具体来说，它会每秒更新一次时间并在页面上显示出来。

实现效果：

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态时间</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #time {
            font-size: 24px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>当前日期和时间</h1>
    <div id="time"></div>

    <script>
        function updateTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');

            const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
            const dayOfWeek = daysOfWeek[now.getDay()];

            const formattedTime = `${year}年${month}月${day}日 星期${dayOfWeek} ${hours}:${minutes}:${seconds}`;
            document.getElementById('time').innerText = formattedTime;
        }

        // 每秒更新一次时间
        setInterval(updateTime, 1000);

        // 页面加载时立即显示时间
        updateTime();
    </script>
</body>
</html>

部分代码解析：

function updateTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');

				const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
				const dayOfWeek = daysOfWeek[now.getDay()];

				const formattedTime = `${year}年${month}月${day}日 星期${dayOfWeek} ${hours}:${minutes}:${seconds}`;
				document.getElementById('time').innerText = formattedTime;
			}

			// 每秒更新一次时间
			setInterval(updateTime, 1000);

			// 页面加载时立即显示时间
			updateTime();

函数定义：
```
function updateTime() { ... }
```
定义了一个名为 updateTime 的函数，用于获取当前时间并格式化为特定的字符串。
获取当前时间：
```
const now = new Date();
```
使用 Date 对象获取当前的日期和时间。
提取日期和时间信息：
```
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
```
- getFullYear()：获取完整的年份（如2024）。
- getMonth()：获取当前月份（0-11），所以加1使其范围变为1-12。
- getDate()：获取当前日期（1-31）。
- getHours()、getMinutes()、getSeconds()：分别获取小时、分钟和秒。
- 使用 padStart(2, '0') 确保月份、日期、小时、分钟和秒都以两位数字显示（例如，09而不是9）。
获取星期几：
```
const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
const dayOfWeek = daysOfWeek[now.getDay()];
```
- getDay()：获取当前是星期几（0-6，0代表星期日）。
- 用一个数组 daysOfWeek 将数字转换为中文星期几的表示。

格式化时间字符串：

const formattedTime = `${year}年${month}月${day}日 星期${dayOfWeek} ${hours}:${minutes}:${seconds}`;

使用模板字符串将所有信息组合成一个格式化的字符串。

更新网页内容：
```
document.getElementById('time').innerText = formattedTime;
```
找到网页中ID为 time 的元素，并将格式化后的时间字符串赋值给它，使其显示在页面上。
定时更新：
```
setInterval(updateTime, 1000);
```
每1000毫秒（即每秒）调用 updateTime 函数，实现实时更新。
页面加载时初始化：
```
updateTime();
```
页面加载时立即调用一次 updateTime，以确保在页面加载时就显示当前时间。