JavaScript实现带阴影的动态时钟代码
需积分: 6 28 浏览量
更新于2024-09-20
收藏 1KB TXT 举报
"这是一个使用JavaScript编写的带阴影效果的时钟程序，可以保存为HTML文件并在浏览器中运行。页面上会有两个时钟显示，一个正常显示，另一个带有阴影效果，通过CSS滤镜实现。"
该程序的核心是利用JavaScript的Date对象获取当前时间，并动态更新页面上的时间显示。以下是对代码主要部分的详细解释：
1. 创建Date对象：
`d = new Date();` 这一行代码创建了一个新的Date对象，它包含了当前系统的时间信息。
2. 获取时间信息：
- `hours = d.getHours();` 获取当前小时数。
- `minutes = d.getMinutes();` 获取当前分钟数。
- `seconds = d.getSeconds();` 获取当前秒数。
3. 处理12小时制：
- `(hours >= 12) ? "PM" : "";` 如果当前时间在中午12点之后，设置AM/PM标记为"PM"，否则为空字符串。
- `(hours > 12) ? hours - 12 : hours;` 如果小时数大于12，减去12以适应12小时制。
4. 两位数格式化：
- 使用条件判断确保小时、分钟和秒数始终显示为两位数，例如："08"而不是"8"。
5. 构造时间字符串：
- `time = clck + "" + hours + ":" + minutes + ":" + seconds;` 将AM/PM标记、小时、分钟和秒组合成一个字符串。
6. 设置HTML元素内容：
- `myclock1.innerHTML = time;` 更新第一个时钟（myclock1）的内容。
- `myclock2.innerHTML = time;` 更新第二个时钟（myclock2）的内容。
7. 设置阴影效果：
- `myclock2.style.left = myclock1.style.posLeft;` 将第二个时钟的位置设置为与第一个时钟相同。
- `myclock2.style.top = myclock1.style.posTop + myclock1.offsetHeight;` 第二个时钟的位置在第一个时钟下方，以创建阴影效果。
- `filter: flipv() alpha(opacity=20);` CSS滤镜用于翻转并降低透明度，模拟阴影。
8. 定时更新：
- `setTimeout("showClock()", 1000);` 每隔1秒调用一次`showClock()`函数，保持时间的实时更新。
9. 页面加载事件：
- `<body onLoad="showClock()">` 当页面加载完成时，自动调用`showClock()`函数初始化时钟。
此程序提供了一个基本的JavaScript时钟功能，同时也展示了如何通过CSS样式来实现简单的视觉效果。虽然简单，但它是学习JavaScript动态更新网页内容和CSS样式的一个好例子。
2021-08-15 上传
2024-04-22 上传
2021-02-13 上传
2021-03-15 上传
2023-03-15 上传
2023-05-20 上传
2020-12-21 上传
2009-06-25 上传
255 浏览量
zhs19880321
- 粉丝: 18
- 资源: 5
我的内容管理
展开
最新资源
- Fisher Iris Setosa数据的主成分分析及可视化- Matlab实现
- 深入理解JavaScript类与面向对象编程
- Argspect-0.0.1版本Python包发布与使用说明
- OpenNetAdmin v09.07.15 PHP项目源码下载
- 掌握Node.js: 构建高性能Web服务器与应用程序
- Matlab矢量绘图工具：polarG函数使用详解
- 实现Vue.js中PDF文件的签名显示功能
- 开源项目PSPSolver：资源约束调度问题求解器库
- 探索vwru系统：大众的虚拟现实招聘平台
- 深入理解cJSON：案例与源文件解析
- 多边形扩展算法在MATLAB中的应用与实现
- 用React类组件创建迷你待办事项列表指南
- Python库setuptools-58.5.3助力高效开发
- fmfiles工具：在MATLAB中查找丢失文件并列出错误
- 老枪二级域名系统PHP源码简易版发布
- 探索DOSGUI开源库：C/C++图形界面开发新篇章
