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