Java脚本打造彩色HTML时钟程序

1星需积分: 13 137 浏览量更新于2024-09-20 收藏 5KB TXT 举报

"Java脚本实现的彩色时钟程序，可保存为HTML文件在浏览器中运行。" 这个程序是一个基于JavaScript的彩色时钟，它利用HTML和JavaScript来创建一个动态显示时间的可视化时钟。HTML文件是网页的基础结构，而JavaScript则提供了动态交互的能力。在给出的代码中，我们可以看到以下几个关键知识点： 1. **HTML结构**：HTML文件的开头声明了DOCTYPE，这定义了文档类型为HTML4.01严格模式。接着，`<html>`、`<head>`和`<body>`标签分别表示整个HTML文档、头部信息和主体内容。`<title>`标签用于设置页面标题。 2. **JavaScript引入**：JavaScript代码被包含在`<script>`标签内，`language="javascript"`表明这是JavaScript代码。`<script>`标签可以放在`<head>`或`<body>`标签内，但通常放在`<head>`中以提高页面加载速度。 3. **变量与数组**：`pX`和`pY`用于存储时钟的位置坐标。`obs`是一个二维数组，用于存储每个时钟元素（数字和指针）的位置信息。JavaScript中的数组可以动态分配大小，因此可以适应不同数量的元素。 4. **函数定义**： - `ob()`函数用于初始化时钟元素的位置。 - `cl(a, b, c)`函数负责移动时钟元素，根据参数调整元素的像素位置。 - `runClock()`函数用来更新所有时钟元素的位置。 - `timer()`函数是核心的计时器函数，获取当前时间并计算秒、分钟和小时的角度值。 5. **JavaScript时间操作**：通过`new Date()`获取当前系统时间，然后使用`getSeconds()`, `getMinutes()`, `getHours()`分别获取秒、分、小时。这些方法返回的是0到59的整数，所以需要进行转换。 6. **角度转换**：`sec`、`min`、`hr`变量将时间值转换为弧度，以便于计算时钟指针相对于中心点的位置。JavaScript中的Math对象提供了π值（`Math.PI`），以及将角度转换为弧度的`Math.radians()`方法（这里没有直接使用，但通常会用到）。 7. **样式更新**：使用`eval()`函数动态地修改元素的CSS属性，如`pixelTop`和`pixelLeft`，这在IE浏览器中常见。对于非IE浏览器，如Firefox、Chrome等，使用`top`和`left`属性。这个程序通过JavaScript实现了动态时钟的功能，展示了如何结合HTML和JavaScript来创建交互式的网页应用。尽管现代网页开发更多地使用了更强大的框架如React或Vue.js，但基础的JavaScript知识仍然至关重要，因为它是所有浏览器都支持的原生脚本语言。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>


<SCRIPT language=javascript>
<!--
pX=400;pY=200
obs = new Array(13)
function ob () {
for (i=0; i<13; i++) {
if (document.all) obs[i]=new Array (eval('ob'+i).style,-100,-100)
else obs[i] = new Array (eval('document.ob'+i),-100,-100)
}
}
function cl(a,b,c){
if (document.all) {
if (a!=0) b+=-1
eval('c'+a+'.style.pixelTop='+(pY+(c)))
eval('c'+a+'.style.pixelLeft='+(pX+(b)))
}
else{
if (a!=0) b+=10
eval('document.c'+a+'.top='+(pY+(c)))
eval('document.c'+a+'.left='+(pX+(b)))
}
if (document.all) c0.style.pixelLeft=26

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

zhs19880321

粉丝: 18
资源: 5

Java脚本打造彩色HTML时钟程序

批处理 动态 时钟

多功能数字时钟源代码

java脚本编程

java 的时钟程序

scriptpad——Java脚本语言学习、演示程序

script-machine:Java 脚本应用程序

shell脚本运行java程序jar的方法

C# Java 做程序用的几个脚本！

深入了解Java 脚本化api编程

Java脚本教程（学习资料）

最新资源

批处理动态时钟