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

动态时间【JavaScript】

news 2024/9/23 23:54:45

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

实现效果：

代码：

<!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，以确保在页面加载时就显示当前时间。