|
让显示的时间无缝的表现在网页中 |
|
看过太多的主页上面,有实时的时间显示,但是这些时间都是显示在某些FORM组件中,显得太突出了网页,虽然也可以通过修改FORM组件的style属性,来使得这些FORM和网页是融合在一起的,不过当把鼠标移到这些FORM上后,马脚露出来了。
其实我们可以把动态显示的时间和网页无缝的融合起来的,到我的网站(www.stonl.com)上,你能够发现这些做法。 察看源文件,你可以找到这些内容: <HTML> <HEAD> <!-- ~~~ --> <script language=javascript><!-- function PutTimes(obj) { setTimeout('PutTimes('+obj.id+')',1000); var now=new Date(); var year=now.getYear(); var month=now.getMonth()+1; var date=now.getDate(); var hours=now.getHours(); var mins=now.getMinutes(); var secs=now.getSeconds(); var timeVal; if(hours<6)timeVal='注意休息'; else if(hours<9)timeVal='早上好'; else if(hours<12)timeVal='上午好'; else if(hours<18)timeVal='下午好'; else timeVal='晚上好'; timeVal+=',现在是'; timeVal+=((hours<10)?'0':'')+hours; timeVal+=((mins<10)?':0':':')+mins; timeVal+=((secs<10)?':0':':')+secs; timeVal+=((month<10)?',0':',')+month+'-'; timeVal+=((date<10)?'0':'')+date; timeVal+='-'+year; obj.innerHTML=timeVal; } //--> </script> </HEAD> <BODY> <!-- ~~~ --> <FONT color=#ffffcc face="Arial,Helvetica,sans-serif,宋体" size=1 id=times><!--注意休息,现在是01:41:21,11-29-2000 --></FONT> <script><!-- PutTimes(times); //--> </script> <!-- ~~~ --> </BODY> </HTML> 或者把PutTimes函数的调用放到<BODY>的onload响应函数中,然后测试一下结果怎么样? 说明:对于网页中的对象,一般它会有一个innerHTML属性,内容是属于该对象的HTML内容,如上面的例子中,times的innerHTML为‘<!--注意休息,现在是01:41:21,11-29-2000 -->’,我们可以动态的改变对象的innerHTML值,达到动态的改变网页的内容的效果,从而使得我们显示的时间确实是网页的一部分,而不需要在网页中加入一些控件,通过改变控件的text来达到。 setTimeout是设定定时器函数,这里设定每一秒钟更新一次时间。 欢迎赐教! |