这个代码实现了一个动态显示当前日期和时间的功能。具体来说，它会每秒更新一次时间并在页面上显示出来。
实现效果：
代码：
<!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，以确保在页面加载时就显示当前时间。
