电脑资料-学海荡舟 - 电脑乐园

20.显示日期和跳动的时间

　　现在很多网页上都有一个区域显示日期、时间和星期，许多网友问这是怎么实现的呢？下面给出一个实现的方法，最终的效果请看下面演示：

今天是：

现在时间：

　　源码粘贴框：

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"></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>中加入 onload="startclock();" 语句：<body onLoad="startclock();">

　　下面是详细的步骤，我们来具体做一下吧。

　　1、显示日期和星期：

　　我们可以在页面的任意位置显示当前的日期和星期，我们把下面一段JavaScript代码插入到要显示日期的地方即可，需要注意的是，必须为显示区留出足够的位置，不然有可能在浏览时发生折行而影响美观；

显示日期和星期的代码提示

　　2、显示不断跳动的时间：

　　虽然我们很容易从系统读取时间并把它显示出来，但如果我们不采用一定的技巧，显示出的时间只能是网页打开时的时间，它是固定不变的。这里我们来实现一个不断随系统时间变化的时钟。
　　第一步先在要显示时间的地方插入一个文本框TextField并命名为tt(一定要注意大小写哦)，它的作用是作为时间输出的对象，我们在JavaScript中将timeValue值赋给tt.value，也就是随时改变文本框的显示值来动态显示时间；
　　第二步在<head>中插入如下的JavaScript代码，这段代码的作用是每隔一秒读取一次系统时间，然后将它在文本框中显示；

显示动态时间的代码提示

　　第三步在<body>中添入“onload="startclock();"”，这句代码的作用是在网页加载时调用startclock()函数，也就是开始显示动态时间变化。

　　好，做完以上的工作，我们在浏览器中就能看到显示日期、星期和动态时间的效果了。

欢迎你接着看下一个技巧

上一个技巧（鼠标移过链接时实现特定响应）　下一个技巧（页面滚动显示）