20.显示日期和跳动的时间
现在很多网页上都有一个区域显示日期、时间和星期，许多网友问这是怎么实现的呢？下面给出一个实现的方法，最终的效果请看下面演示：
今天是： 2004年4月29日星期四 现在时间：019 A.M.
源码粘贴框：
1.在要显示日期和星期的地方插入如下一段JavaScript：
<script language=JavaScript> var version = 1.0;</script>
<script language=JavaScript1.1> var version = 1.1;</script>
<script language=JavaScript1.2> var version = 1.2;</script>
<script language=JavaScript1.3> var version = 1.3;</script>
<script language="JavaScript">
<!--
var y=new Date();
var gy=y.getYear();
var dName=new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
var mName=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
if (version < 1.3)
{
if (gy<2000)
{
document.write("<FONT COLOR=\\"black\\" class=\\"p1\\">"+"19"+y.getYear()+"年" + mName[y.getMonth()] + y.getDate() + "日" + dName[y.getDay()] + "" + "</FONT>");
}
else
document.write("<FONT COLOR=\\"black\\" class=\\"p1\\">"+y.getYear()+"年" + mName[y.getMonth()] + y.getDate() + "日" + dName[y.getDay()] + "" + "</FONT>");
}
else
{
document.write("<FONT COLOR=\\"black\\" class=\\"p1\\">"+y.getFullYear() +"年"+ mName[y.getMonth()] + y.getDate() + "日" + dName[y.getDay()] + "</FONT>");
}
//-->
</script>
2.在<head>中插入下面一段JavaScript：
<script language="JavaScript">
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var timeValue = "" + ((hours >12) ? hours -12 :hours);
timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
timeValue += (hours >= 12) ? " P.M." : " A.M.";
tt.value=timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
function startclock () {
stopclock();
showtime();
}
</script>
3.在<body>中加入 语句：
<body >
下面是详细的步骤，我们来具体做一下吧。
1、显示日期和星期：
我们可以在页面的任意位置显示当前的日期和星期，我们把下面一段JavaScript代码插入到要显示日期的地方即可，需要注意的是，必须为显示区留出足够的位置，不然有可能在浏览时发生折行而影响美观；
2、显示不断跳动的时间：
虽然我们很容易从系统读取时间并把它显示出来，但如果我们不采用一定的技巧，显示出的时间只能是网页打开时的时间，它是固定不变的。这里我们来实现一个不断随系统时间变化的时钟。
第一步先在要显示时间的地方插入一个文本框TextField并命名为tt(一定要注意大小写哦)，它的作用是作为时间输出的对象，我们在JavaScript中将timeValue值赋给tt.value，也就是随时改变文本框的显示值来动态显示时间；
第二步在<head>中插入如下的JavaScript代码，这段代码的作用是每隔一秒读取一次系统时间，然后将它在文本框中显示；
第三步在<body>中添入“”，这句代码的作用是在网页加载时调用startclock()函数，也就是开始显示动态时间变化。
好，做完以上的工作，我们在浏览器中就能看到显示日期、星期和动态时间的效果了。
21.页面滚动显示
有时我们公告窗口中的内容较多，而公告窗口又不能设定的太大，如果加上滚动条则会影响浏览效果，这时让窗口中的内容自行滚动会是一个不错的解决方法，下面我们看看怎样用几句简单的JavaScript语句来实现它。
点击下面的“打开自滚动窗口”按钮，你就能看到滚动显示的效果，而如果你点击“主窗口自行滚动”你会发现，连这个窗口也滚动起来。
打开自动滚动窗口 主页面自行滚动
源码粘贴框：
1.主窗口自行滚动的JavaScript代码：
<script language="JavaScript">
<!--
locate = 0;
function scroller() {
if (locate !=400 ) {
locate++;
scroll(0,locate);
clearTimeout(timer);
var timer = setTimeout("scroller()",3);
timer;
}
}
</script>
如果你想让窗口打开时即开始滚动，你可以在
<body>与</body>之间加上onload语句，如下所示：
<body >
2.公告窗口循环滚动的JavaScript代码:
你可以把它插入公告窗口的<head>中
<script language="JavaScript">
<!--
locate = 0;
function scroller() {
if (locate !=600 ) {
locate++;
scroll(0,locate);
clearTimeout(timer);
var timer = setTimeout("scroller()",3);
timer;
}
else{locate=0
scroll(0,locate);
clearTimeout(timer);
var timer = setTimeout("scroller()",3);
timer;
}
}
// -－>
</script>
然后在<body>中加入onload()语句。
要注意的是：上面代码中locate的值应该根据你所制作
的页面的高度适当调整。
下面我们来试着做一下吧。
1、你可以看到主页面的滚动只有一次，而不是循环滚动的，这样的滚动实现起来简单一些，我们只须在主页面的<head>与</head>之间插入一段JavaScript代码，这段代码中包含了一个scroller()函数。
如果要在按钮按下开始滚动，我们可在如下图所示位置加上onclick()语句，它的作用是当按钮被点击时调用scroller()函数。
而如果你想要主页面一打开就自行滚动，你只须在<body>与</body>之间加入“”语句，它的意思是页面加载时即调用scroller()函数。
2、循环滚动的公告窗口实现起来稍微要复杂一些，首先插入公告窗口<head>与</head>之间的JavaScript代码要做修改，如下面所示：
然后在公告窗口的<body>中加入“”语句；最后我们需要在主页面中打开这个公告窗口，方法同样是在主页面的<body>中加入onload语句。如果你对实现公告窗口还不清楚的话，你可以参照一下第12个网页制作技巧“怎样实现公告窗口”的内容。
经过以上的步骤，会循环滚动的公告窗口就完成了，这样滚动窗口有时是非常有用的，怎么用？那就要看你的了。
22.自动显示最后更新时间
我们自己网页上传以后，经常会不断更新和添加新的内容，而怎样才能让浏览网页的网友知道自己的辛苦更新呢？通常我们会在网页的一角，列出此网页更新的最后日期，但是这个工作如果手工来做的话，既麻烦又容易遗忘。怎么样解决这个问题呢？
看了这个小技巧，你定会说，原来这么简单。好了，下面我们来做一下吧。
源码粘贴框：
<script language="JavaScript">
<!--hide script from old browsers
document.write("本页最后更新日期: " + document.lastModified + "")
// end hiding -->
</script>
我们只要把“源码粘贴框”中的JavaScript代码复制到你想要显示最后更新时间的地方就行了。
如果我们把代码复制到如下的表格中，则每次这个页面的html文件更改时，表格中便自动显示出更新时间，如下所示：
本页最后更新日期: 07/10/2000 1437
代码中document.write()的意思是在页面上写出括号内设定的内容，现在我们采用“document.lastModified”得到文件最后更新时间，并把它显示出来。灵活运用“document.write()”语句，我们还能在页面上输出其它内容，比如说当前的时间、日期、用户信息等，大家可以去试一试。
23.跑马灯大全(一)
实现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句，它的效果如下所示：
滚动的文字
适当的运用<marquee>标签的参数，可以表现出不同的效果，请看下面的几个例子：
1、左右弹来弹去的跑马灯
弹来弹去跑马灯!
实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动，direction=left表示运动方向向左。marquee的宽度可以使用绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在Netscape下是看不到的。
源码粘贴框：
<marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>
２、跑的很快的跑马灯
跑的很快跑马灯!
只要在<marquee>标签内加上“scrollamount=30”参数即可。
３、带有超级链接的跑马灯
带有超链接的跑马灯!点我试试？ 还有一条呢!点我试试？
其实实现的方法很简单，把整个<marquee></marquee>语句包含在超链接中就行，你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接，这样的跑马灯用来发布滚动新闻或是做站点导航再合适不过了。
源码粘贴框：
<marquee width=90%>
<a href="http://www.hongen.com/default.htm" target=_blank>带有超链接的跑马灯!点我试试？</a>
<a href="http://www.hongen.com/pc/index.htm" target=_blank>还有一条呢!点我试试？</a>
</marquee>
以上几个例子都是<marquee>标签参数的应用，下面把所有可以利用的参数列在表中供你参考，不过还是要提醒你，<marquee>标签只被IE所支持，使用Netscape浏览器是看不到的噢。
参数 用法介绍
behavior=scroll, slide, alternate 跑马方式：循环绕行，只跑一次就停住，来回往复运动
direction=left,right 跑马方向：从左向右，从右向左
loop=100 跑马次数：循环100次，如不写默认为一直循环
width=100%,height=200 跑马范围：宽为100%，高为200像素
scrollamount=20 跑马速度：数越大越快
scrolldelay=500 跑马延时：毫秒数，利用它可实现跃进式滚动
hspace=20，vspace=20 跑马区域与其它区域间的空白大小
bgcolor=#00FFCC 跑马区域的背景颜色
你已经看到，尽管<marquee>参数不少，单毕竟不能实现复杂的和自定义的特殊跑马灯效果，而且还有浏览器限制，所以我们更多情况下会采用JavaScript来实现跑马灯，那就是我们下一个技巧的内容。
24.跑马灯大全(二)
这里向你介绍几个用JavaScript实现的较复杂的跑马灯，你只须把源码粘贴框中的代码按照说明复制的指定的位置就能看到跑马灯的效果。
1、状态栏中的跑马灯
在默认状态下浏览器的状态栏中显示的是链接指向信息，给人的感觉很单调。如果我们把问候语或是站点的介绍放在状态栏中滚动显示，一定能取得很好的效果。
点击我，然后看看下面的状态栏吧
源码粘贴框：
1、将以下代码放在<head>与</head>之间：
<script LANGUAGE="JavaScript">
<!-- Begin
var Mes=new Array();
Mes[0]="洪恩在线欢迎你！ ";
Mes[1]="感谢你关注电脑交互教程 ";
Mes[2]="网页制作技巧 之 跑马灯大全 ";
var place=1;
var i=0;
function scroll()
{
window.status=Mes.substring(0, place);
if (place >= Mes.length)
{
if(i<2)
{
i++;
place=1;
window.setTimeout("scroll()",50);
}
else
{
i=0;
place=1;
window.setTimeout("scroll()",50);
}
}
else {
place++;
window.setTimeout("scroll()",50);
}
}
// End -－>
</script>
2、在<body>标签内加入onload 语句：
<body >
实现步骤:
(1)首先将JavaScript代码复制到<head>与</head>之间，这段代码中包含了scroll()函数，它是实现跑马灯的主体代码。我们可以修改mes[]数组的值来改变跑马灯的内容，你也可以显示更多条的信息，不过代码中i的值应等于信息的条数，也就是等于mes[]数组的维数；
(2)然后在<body>标签中加入onload()语句即可。
