|

● 进阶动态显示时间效果
本篇教程我们将介绍两个好用的JavaScript程式,让你将网页中日期和时间效果动态化、随心所欲变换时间日期方框中的文字和背景色彩,由于这两个效果使用的是比较进阶的JavaScript技巧,我们只要学会如何套用在网页中就可以了。

上一单元中,我们利用文字方框,在网页中动态显示目前的时间。如果你觉得文字方框破坏了网页的美感,下面这个程式,可以除去文字方框,直接在网页中显示时间。



先复制以下这段程式码。
<script language="Javascript1.2">
<!--
var tags_before_clock = "<center><big><font
color='#000000'>现在时间是"
var tags_after_clock = "</font></big></center>"
if(navigator.appName == "Netscape") {
document.write('<layer id="clock"></layer><br>');
}
if (navigator.appVersion.indexOf("MSIE") != -1){
document.write('<span id="clock"></span><br>');
}
function showclock()
{
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var col = ":";
var spc = " ";
var apm;
if ( hour >12 )
{
apm="P.M.";
hour=hour-12;
}
else
{
apm="A.M.";
}
if (hour == 0) hour=12;
if (min<=9) min="0"+min;
if (sec<=9) sec="0"+sec;
if(navigator.appName == "Netscape")
{
document.clock.document.write(tags_before_clock
+hour+col+min+col+sec+spc+apm+tags_after_clock);
document.clock.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1)
{
clock.innerHTML = tags_before_clock+hour
+col+min+col+sec+spc+apm+tags_after_clock;
}
}
setInterval("showclock()",1000);
//-->
</script>

接着,切换至FrontPage 2000[HTML]活页标签,将文字输入游标|移至想要显示在网页中的位置后,按下功能表上的[编辑],点选[贴上]即可制作出这个效果。

|