<!DOCTYPE html>
<html>
<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;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 0;
padding: 20px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#clock {
background: rgba(255, 255, 255, 0.9);
padding: 30px 50px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
font-size: 24px;
font-weight: bold;
color: #333;
text-align: center;
border: 2px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
}
.time-label {
color: #667eea;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="clock">
<span>当前时间：</span>
<span id="time-display">加载中...</span>
</div>
<script>
function clockon() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1; // 月份从0开始，需要+1
var date = now.getDate();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var day = now.getDay();
var arr_week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var week = arr_week[day];
// 格式化时间，确保两位数显示
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
var time = year + "年" + month + "月" + date + "日 " + hours + "时" + minutes + "分" + seconds + "秒 " + week;
// 直接更新时间显示区域的文本内容
document.getElementById("time-display").textContent = time;
}
// 页面加载后立即显示时间
window.onload = function() {
clockon(); // 立即执行一次
setInterval(clockon, 1000); // 每秒更新一次
};
</script>
</body>
</html>每次调用 clockon 函数时都会创建新的文本节点并追加到页面上，导致文字不断累积。
要解决这个问题，需要修改 clockon 函数，使其直接更新现有元素的文本内容，而不是不断追加新内容。
主要修改点说明：
分离显示区域：将静态文本"当前时间："和动态时间显示分开，使用独立的
<span id="time-display">元素专门用于显示更新时间。直接更新文本内容：使用
document.getElementById("time-display").textContent = time直接替换现有内容，而不是创建新节点追加。优化时间显示：添加了时间格式化，确保时、分、秒都显示为两位数，提升视觉效果。
改进样式设计：添加了现代化的CSS样式，包括渐变背景、毛玻璃效果、阴影等，提升用户体验。
调整更新频率：将更新间隔改为1000毫秒（1秒），提供更流畅的时间显示效果。
这样修改后，每次调用 clockon 函数都会直接在原有位置上更新显示时间，而不会产生文字累积的问题。
document.getElementById("clock").textContent = time;这句中的textContent是自定义的还是规定好的，是啥意思
textContent 是 JavaScript 中一个规定好的属性，用于获取或设置指定元素及其所有后代元素的文本内容。
该属性属于 Web API 标准，用于操作 DOM 元素的文本内容。
当你使用 document.getElementById("clock").textContent = time; 时，
它会将 time 变量的值设置为 id 为 "clock" 的元素的文本内容。
与类似的 innerText 属性相比，textContent 的主要特点是：
它会获取元素内所有的文本内容，包括那些通过 CSS 设置为 display: none 的隐藏元素的文本，
并且无论原始 HTML 中的标签和格式如何，返回的都是不换行的纯文本。
需要注意的是，textContent 是 W3C 标准属性，
在 Chrome、Firefox 等现代浏览器中支持良好，但 IE8 不支持该属性。
document.getElementById("clock").textContent = time;这句能直接更新时间显示区域的文本内容，那更新的逻辑是什么，没看出更新啊
这行代码
document.getElementById("clock").textContent = time;的更新逻辑是直接替换指定元素的全部文本内容，而不是追加新内容。
当执行这条语句时，浏览器会：
找到页面上 ID 为 "clock" 的 HTML 元素
用新的
time字符串值完全覆盖该元素原有的所有文本内容触发浏览器的重绘机制，在视觉上立即显示新的时间值
这种更新方式之所以看起来"不明显"，是因为它直接替换了元素的整个文本内容，
而不是像 appendChild() 那样在原有内容后面添加新节点。
与 appendChild() 方法相比，textContent 的操作更加高效，
因为它避免了创建新文本节点的开销，直接修改现有元素的文本属性5。
在时间显示场景中，每次调用都会用新的格式化时间字符串替换掉旧的时间显示，从而实现实时更新的效果。