显示日期和跳动的时间

显示日期和跳动的时间

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

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

<body onLoad="startclock();">

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

　　1、显示日期和星期：

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

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

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

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

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

♡ 点赞 0

☆ 收藏 0

留言区（共0条）