站点首页 | 实用文章 | 考试相关 | 论文中心 | 故事小说 | 教程中心
热门文章
搜索
您现在的位置: hglm >> 教程中心 >> 网页制作 >> Javascript >> 教程正文
JavaScript动态网页制作宝库 - 网页电子时钟揭密
在网页做一个小小电子时钟,给你的网页增加一点新意。本文介绍的电子时钟是可由用户控制的,若你喜欢它,就把它打开,若不喜欢它,可随时将它关闭。你可试试下面的例子。


  图1 显示时间


  图2 关闭时间显示

  实际上,这种动态效果,用Javascript来做,也用不了几行代码。编程思路:用一个时间函数不断地刷新单行文本框中的时间。然后用一个单选框来调用显示时间的程序,再用一个单选框来取消时间函数。我们知道Javascript的Date对象中不仅可获得当前日期。而且可以获得当前时间,关键的问题是如何把表示时间的数值分离出来,方法有多种,下面分别介绍。
  方法一:这种方法比较传统,但程序比较繁(不推荐)。程序代码如下:
<script language="Javascript">
<!--
function showtime(){
now=new Date(); //获取当前日期和时间,并赋给now;
H=now.getHours(); //从now 对象中分离出小时数;
M=now.getMinutes(); //从now 对象中分离出分钟数;
S=now.getSeconds(); //从now 对象中分离出秒数。
timestr=(H<10)?("0"+H):H; //如果小时数小于10,就给它加一个“0”,使其保持两位数。
timestr+=":"; //小时数后面加一个两点(“:”)的符号。
timestr+=(M<10>)?("0"+M):M; //如果分钟数小于10,就给它加一个“0”,使其保持两位数。
timestr+=":"; //分钟数后面加一个两点(“:”)的符号。
timestr+="(S<10)?("0"+S):S; //如果秒数小于10,就给它加一个“0”,使其保持两位数。
document.all["witch"].value=timestr; //把当前时间字符串赋给文本框(“witch”)的value属性,从而在文本框中显示当前时间。
ctroltime=setTimeout("showtime"),500); //设置一个定时函数,使得每0.5秒刷新一次文本框中显示的当前时间,从而达到电子时钟每秒跳一下的效果。
}
function closetime(){
clearTimeout(ctroltime) //取消定时函数,也就停止刷新文本框中的时间值,达到关闭时钟的效果。
}
-->
</script>
  在这段程序中,timestr=(H<10)?("0"+H):H;语句是if语句的缩写形式,它与if (H<10) timestr="0"+H else timestr=H;语句的作用完全相同。另外“+=”运算符的作用是:把两个操作数相加再把结果赋给左操作数,如:timestr+=":";与“timestr=timestr+":"”语句完全等效。

  方法二、这种方法比上面的方法简单多了。程序代码如下:
<script languae="JavaScript">
<!--
function showtime(){
var i=0; // 声明一个变量,用于放置的值
now=new Date(); //获取当前日期和时间
timestr=now.toLocaleString(); //把当前时间转换成字符形式
i=timestr.indexOf(":"); // 找出“:”的位置。
nowtime=timestr.substring(i-2,i+6) //把“:”所在位置的前两位到“:”位置后6位的所有字符取出来,实际上是把表示时间的字符串取出来。
document.all["witch"].value=nowtime; //此后的语句与方法一相同,不另解释。
ctroltime=setTimeout("showtime()",500);
}
function closetime(){
clearTimeout(ctroltime)
}
-->
</script>
  在这段程序中,使用日期对象的toLocaleString()方法,把日期转换在字符串形式,便于后面的操作;字符串对象的indexOf()方法的作用是找出给定字符在当前字符串的位置;字符串对象的substring(pos1,pos2)方法的作用是取得字符串的子串,pos1和pos2 分别是子中的起始位置和结束位置。

  方法三、这种方法所用代码最少,程序代码如下:
<script languae="JavaScript">
<!--
function showtime(){
now=new Date();
timestr=now.toLocaleString();
document.all["witch"].value=timestr.split(" ")[3];
ctroltime=setTimeout("showtime()",500);
}
function closetime(){
clearTimeout(ctroltime)
}
-->
</script>
  本方法的巧妙之处是采用了字符对象的分割字符串方法(split()),它的用法格式为:string1.split(string2)
  其作用是:将字符串string1按照string2进行分割,返回一个数组,分割后的内容按顺序放在数组中。在本方法中,就是把日期字符串按空格(" ")分割,这样分割后,时间字符串正好在数组的第四个下标变量中。由于该数组是从0开始起算的,所以把timestr.split(" ")[3];赋给文本框的value参数,若你感到这讲得太专业了,你直接把程序复制就行了。
  表单的代码如下:
<input type="text" name="witch" size="8" value="电子表">
<input type="radio" name="radiobutton" value="radiobutton"

[1] [2] 下一页

Copyright(c) hglm.com All rights reserved. 浙ICP备06001730号