带倒影效果的时钟

- 中国WEB开发者网络 (http://www.webasp.net)
-- 网页特效 (http://www.webasp.net/javascript/)
--- 带倒影效果的时钟 (http://www.webasp.net/javascript/1/43.htm)
-- 发布日期： 2004-05-26
<!-- 网页特效代码由[中国WEB开发者网络:http://www.ChinaWebDev.com]提供！ -->
<!-- 要实现此效果需要 3 个步骤： -->

<!-- 第 1 步： -->
<!-- 把下面的代码加到<HEAD></HEAD>区域中： -->

<style>

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

</style>

<SCRIPT language=JavaScript>

<!-- 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>



<!-- 第 2 步： -->
<!-- 把<BODY>中的属性代码改为： -->

<BODY onload="init()">



<!-- 第 3 步： -->
<!-- 把下面的代码加到<BODY></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>

webasp.net