### 在页面上显示日期、星期和时间（HTML经典用例）
#### 核心知识点解析
本文将详细介绍如何在网页上动态地显示当前日期、星期以及时间，并深入分析所涉及的关键技术点，包括HTML结构设计、JavaScript编程实现等。
#### HTML与JavaScript结合应用
**HTML**（HyperText Markup Language）用于定义网页的结构，而**JavaScript**则用于添加动态功能。在本案例中，我们将通过JavaScript来获取当前的时间和日期，并将其插入到HTML文档中展示出来。
#### JavaScript实现关键步骤
1. **获取当前时间对象**
- 使用`new Date()`创建一个表示当前时间的对象。
2. **提取时间组成部分**
- 通过`getHours()`, `getMinutes()`, `getSeconds()`方法获取当前的小时、分钟和秒数。
- 通过`getYear()`, `getMonth()`, `getDate()`, `getDay()`方法获取当前的年份、月份、日期和星期几。
3. **格式化时间**
- 根据不同的需求，对时间进行格式化处理。
4. **输出到HTML文档**
- 使用`document.write()`方法将格式化后的时间插入到HTML文档中。
#### 代码解析
```javascript
// 获取当前时间
today = new Date();
// 提取时间组成部分
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
// 时间格式化
var timeValue = "<FONTCOLOR=black>" + ((hours > 12) ? hours - 12 : hours);
timeValue += ((minutes < 10) ? "<BLINK><FONT COLOR=black>:</FONT></BLINK>0" : "<BLINK><FONT COLOR=black>:</FONT></BLINK>") + minutes;
timeValue += (hours >= 12) ? "<FONT COLOR=blue><I><B>pm</B></I></FONT>" : "<FONT COLOR=blue><B><I>am</I></B></FONT>";
// 创建数组存储星期信息
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i + 1] = initArray.arguments[i];
}
}
var d = new initArray("<font color=RED>星期日", "<font color=black>星期一", "<font color=black>星期二", "<font color=black>星期三", "<font color=black>星期四", "<font color=black>星期五", "<font color=GREEN>星期六");
// 输出日期和时间
document.write("<font color=black>19" + today.getYear() + "<font color=red>年" + "<font color=black>" + (today.getMonth() + 1) + "<font color=red>月" + "<font color=black>" + today.getDate() + "<font color=red>日" + "</FONT>" + d[today.getDay() + 1] + "", timeValue);
```
#### 核心代码解析
- **获取当前时间**: `new Date()`创建一个表示当前时间的Date对象。
- **时间组成部分**: 使用`getHours()`, `getMinutes()`, `getSeconds()`获取小时、分钟、秒。
- **日期组成部分**: 使用`getYear()`, `getMonth()`, `getDate()`, `getDay()`获取年、月、日、星期。
- **时间格式化**: 根据具体需求格式化时间，如12小时制或24小时制。
- **输出**: 使用`document.write()`直接将内容写入文档流。
#### 注意事项
1. **兼容性问题**: 使用`getYear()`可能会导致浏览器兼容性问题，建议使用`getFullYear()`替代。
2. **日期格式**: 需要注意日期的格式是否符合用户的阅读习惯。
3. **动态刷新**: 该示例仅一次性输出时间，若需实时更新，可考虑使用`setInterval`定时刷新时间显示。
#### 结论
本示例展示了如何使用简单的HTML和JavaScript在网页上动态显示日期、星期和时间。通过对关键步骤的详细解析，不仅帮助理解了核心代码的工作原理，也为进一步学习提供了基础。在实际开发中，可以基于此案例进行扩展，比如增加动态刷新机制、改善用户体验等。
