當前位置:開發者網絡 >> 網頁特效 >> 日期時間 >> 內容
精彩推薦
分類最新特效
分類熱點特效
   
帶倒影效果的時鐘
日期: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>