在网页做一个小小电子时钟，给你的网页增加一点新意。本文介绍的电子时钟是可由用户控制的，若你喜欢它，就把它打开，若不喜欢它，可随时将它关闭。你可试试下面的例子。
图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"
onclick="showtime()">显示时间
<input type="radio" name="radiobutton" value="radiobutton"
onclick="closetime()">关闭时间显示
本文电子时钟的制作方法：
1、用表单按文中介绍的方法制作一个时钟样式，发挥你的创意，把它做得漂亮一点，如可加上背景图片；
2、把程序复制在网页源代码的<head>与</head>之间，大功告成。
本文列举三种方法的目的是想说明，实现同样的效果，方法是多样的，一种好的方法，将大减少代码的数量，是省时省力的好事，所以我们要灵活应用我们所掌握的知识。
