● 进阶动态显示时间效果

　　本篇教程我们将介绍两个好用的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]活页标签，将文字输入游标|移至想要显示在网页中的位置后，按下功能表上的[编辑]，点选[贴上]即可制作出这个效果。