20.显示日期和跳动的时间-开店乐

开店乐

开店乐电子商务研究 KaiDianLe.Com

网站地图 : 一二三四五六七八九十

主页

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

| 回首页 | 网站地图 | 网络技术 >> 网页特效

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

今天是： 2006年10月9日星期一

现在时间：

　　源码粘贴框：【来自：开店乐KaiDianLe.Com】

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()函数，也就是开始显示动态时间变化。

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

【日期：2006-10-9】【作者：网上开店】【转载自：http://www.kaidianle.com】