-4 22

一天一个网页特效--倒影的日历

Category:电脑专业 View: Author:zesee

 带倒影的时间 ，效果：

 

<!--将下面代码粘贴到Html<head></head>之间-->
<style type="text/css">
<!-- .time{font-family : Comic Sans Ms;
font-size : 14pt;font-weight : bold;color: #00008D;}-->
</style><style type="text/css"><!-- .time{
font-family : Comic Sans Ms;font-size : 14pt;
font-weight : bold;color: #00008D;}-->
</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);
}
// --></script>

<!--将下面代码粘贴到Html的<body></body>之间-->
<div Id="tim1" Style="position:absolute; width:10; height:10; top:100; left:350"
class="time"></div><div Id="tim2"
Style="position:absolute; filter:flipv() alpha(opacity=20); font-style:italic"
class="time">
<p>　</p>
</div>
</body>
<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);
}
// --></script>

<!--把网页Html中的<body>改为：-->
<body onLoad="init()">

网页  特效  日历   评论(0)

相关文章:

发表评论

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。