JavaScript实现时钟特效教程

3星 · 超过75%的资源需积分: 10 120 浏览量更新于2024-09-16 收藏 2KB TXT 举报

"JavaScript时钟显示特效教程" 在网页设计中，动态显示时间是一种常见的效果，JavaScript 能够帮助我们实现这一功能。这篇“js菜鸟笔记之时钟显示特效”介绍了如何用 JavaScript 创建一个实时更新的数字时钟。这个教程由 ekom.cn 提供，主要面向初级 JavaScript 开发者。首先，我们看到 HTML 结构非常简单，只包含一个 `<head>` 和 `<body>` 部分。在 `<head>` 中，定义了一个 `<script>` 标签来插入 JavaScript 代码，并且引入了一个外部样式表链接 (`<link rel="stylesheet" href="../style.css">`)，用于定义页面的样式。 JavaScript 代码部分定义了一个名为 `clockon` 的函数，这个函数的作用是获取当前的时间（小时、分钟和秒），并将其格式化成两位数的字符串，然后在页面上显示。`new Date()` 是 JavaScript 中用于创建日期对象的构造函数，它返回一个表示当前日期和时间的新 Date 对象。接下来，我们处理小时、分钟和秒数，确保它们始终以两位数形式显示。如果数值小于10，我们会在前面添加一个 "0"。例如，如果当前时间是 9 点，`hours` 变量会被设置为 "09"。在处理完时间格式化后，我们根据浏览器的兼容性来更新页面上的时间显示。对于支持 `document.all` 的旧版 IE 浏览器，我们使用 `innerHTML` 属性将时间显示在两个元素（bgclocknoshade 和 bgclockshade）中。对于支持 `document.layers` 的 Netscape Navigator 或其他支持层的浏览器，我们动态地创建 `div` 元素并将其写入到文档中。最后，我们使用 `setTimeout` 函数每 200 毫秒调用一次 `clockon` 函数，以实现时钟的实时更新。这意味着页面会每隔 200 毫秒检查一次系统时间，并更新页面上的显示。值得注意的是，这段代码中包含了注释 ``，这是用来隐藏 JavaScript 代码，防止老版本的不支持 JavaScript 的浏览器解析并可能错误显示代码。通过这个简单的实例，初学者可以学习到 JavaScript 日期对象的使用，以及如何利用 DOM 操作和事件处理来实现动态效果。此外，还能了解到对不同浏览器兼容性的处理方式，这对开发跨平台的网页应用至关重要。

<html>
<head>
<TITLE>背景时钟</TITLE>
<script language=javaScript>

</script>
<link rel="stylesheet" href="../style.css"></head>
<body onLoad="clockon()">
<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Arial;color:FF8888;font-size:120px;top:102px;left:152px"></div>

下载后可阅读完整内容，剩余1页未读，立即下载

ekom_cn

粉丝: 0
资源: 47

JavaScript实现时钟特效教程

js菜鸟堂上笔记之自定义函数_ekom.cn

js菜鸟笔记之超长文章分页_ekom.cn

js菜鸟堂上笔记之DOM模型_ekom.cn

js菜鸟堂上笔记之BOM模型_ekom.cn

js菜鸟笔记之表单验证_ekom.cn

js菜鸟笔记之杨辉三角_ekom.cn

js菜鸟笔记之图片飘动_ekom.cn

js菜鸟笔记之动画加载_ekom.cn

js菜鸟笔记之级联菜单_ekom.cn

js菜鸟笔记之图片滚动_ekom.cn

最新资源