Javascript脚本特效示例：[31]倒影时钟

时间：2026-02-15 15:16:33

1、在桌机上新建文本文档，命名为晓博JavaScript特效测试.txt，在文本文档里中入HTML文档的基本元素如下，并保存。

<html>

<head>

<title>晓博JavaScript特效测试</title>

</head>

<body>

</body>

</html>

Javascript脚本特效示例：[31]倒影时钟

2、第一步:把如下代码加入<head>区域中

<head>

<style>

.time { font-size: 12pt; line-height: 14pt; color:red;}

</style>

<!-- Hiding

var ctimer;

function init(){

if (document.all){

tim2.style.left=tim1.style.posLeft;

tim2.style.top=tim1.style.posTop+tim1.offsetHeight-6;

settimes();

}

function settimes(){

var time= new Date();

hours= time.getHours();

mins= time.getMinutes();

secs= time.getSeconds();

if (hours<10)

hours="0"+hours;

if(mins<10)

mins="0"+mins;

if (secs<10)

secs="0"+secs;

tim1.innerHTML=hours+":"+mins+":"+secs

tim2.innerHTML=hours+":"+mins+":"+secs

ctimer=setTimeout('settimes()',960);

}

// Done hiding -->

</SCRIPT>

3、第二步:把如下代码加入<body>区域中

<DIV class=time id=tim1

style="HEIGHT: 20px; LEFT: 50px; POSITION: absolute; TOP: 10px; WIDTH: 10px"></DIV>

<DIV class=time id=tim2

style="FILTER: flipv() alpha(opacity=20); FONT-STYLE: italic; POSITION: absolute"></DIV>

4、第三步:把<body>改为,并重名文档为HTML文件

5、用IE浏览器打开晓博JavaScript特效测试.html文件，关闭网页，可以看到特酷的倒影时钟特效,如下图

Javascript脚本特效示例：[31]倒影时钟

Javascript脚本特效示例：[30]Form栏全时钟

Javascript脚本特效示例：[34]全日制时钟

Javascript脚本特效示例：[32]日期显示

Javascript脚本特效示例：[28]Form中的时钟

Javascript脚本特效示例：[29]可开关Form时钟