使用JavaScript的Date对象结合setInterval每秒更新时间显示；2. 通过布尔变量控制24小时或12小时制切换，并动态添加AM/PM标识；3. 利用CSS设置字体、颜色、布局等样式美化时间展示效果。
如果您希望在网页上实时显示当前时间，可以通过JavaScript结合HTML实现动态更新。以下是几种不同的实现方式：
一、使用JavaScript内置Date对象动态显示时间
通过调用JavaScript的Date()构造函数获取当前系统时间，并利用setInterval定时刷新页面上的时间显示。
1、在HTML中创建一个用于显示时间的元素，例如：<div id="clock"></div>。
2、编写JavaScript代码获取当前小时、分钟和秒，并格式化输出。
立即学习“前端免费学习笔记（深入）”；
3、使用setInterval每1000毫秒执行一次时间更新函数，确保时间实时变化。
4、将格式化后的时间字符串写入指定DOM元素的innerHTML属性中。
二、实现24小时与12小时制切换显示
允许用户根据偏好选择时间格式，通过条件判断实现两种格式的动态切换。
1、定义一个布尔变量is24HourFormat来控制时间格式模式。
2、在时间生成逻辑中添加判断：若为false，则对小时数进行12小时制转换，并追加AM/PM标识。
3、可绑定按钮点击事件来切换is24HourFormat的值，从而改变显示格式。
4、确保每次格式切换后立即更新页面时间显示内容。
三、添加CSS样式美化时间展示效果
通过引入内联样式或外部CSS文件提升时间文本的视觉表现力。
1、为时间容器设置字体大小、颜色和居中对齐属性，如：font-size: 2rem; text-align: center;。
2、使用font-family指定美观的数字字体，增强可读性。
3、添加背景色、边框或阴影效果，使时间区域更突出。
4、利用flex布局将时间居中显示在页面中央位置。
