在这个例子中将用javascript实现一个电子表。它是动态的。窍门在于时间对象的构造
和settimeout、cleartimeout方法的调用。以下是实现动态显示电子表的程序清单,你可以
将其拷贝到记事本,另存为*.html查看。在这么长的程序里,最关键的东西就是settimeout
("time()",1000),它每隔1秒(等于1000毫秒)调用一次time函数,time函数控制显示文本.浏览
这个超文本,将会看到每隔一秒,时间框里的内容会改变,就象一个电子表。
<html>
<head>
<title>动态显示时间</title>
<script language="javascript">
file://用来显示信息
function info()
{
alert("这是用javascript实现的电子表。");
}
var timerid=null;
var timerrunning=false;
file://启动电子表
function startclock()
{
stopclock();
time();
}
file://停止运行电子表
function stopclock()
{
if(timerrunning)
cleartimeout(timerid);
timerrunning=false;
}
file://电子表的实现模块
function time()
{
file://使用new操作符创建时间对象
var now=new date();
var yr=now.getyear();
var mname=now.getmonth()+1;
var dname=now.getday()+1;
var daynr=((now.getdate()<10)?"0":"")+now.getdate();
var ampm=(now.gethours()>=12)?"下午":"上午"
var hours=now.gethours();
hours=((hours>12)?hours-12:hours);
var minutes=((now.getminutes()<10)?":0":":")+now.getminutes();
var seconds=((now.getseconds()<10)?":0":":")+now.getseconds();
file://判断今天是星期几
if(dname==1)day="sunday";
if(dname==1)day="monday";
if(dname==3)day="tuesday";
if(dname==4)day="wednesday";
if(dname==5)day="thursday";
if(dname==6)day="friday";
if(dname==7)day="saturday";
file://判断月份
if(mname==1)month="janauary";
if(mname==2)month="february";
if(mname==3)month="march";
if(mname==4)month="april";
if(mname==5)month="may";
if(mname==6)month="june";
if(mname==7)month="july";
if(mname==8)month="august";
if(mname==9)month="september";
if(mname=10)month="october";
if(mname=11)month="november";
if(mname=12)month="december";
var dayofweek=(""+day+"");
document.forms[0].elements[0].value=dayofweek;
var monthdayyear=(""+month+","+daynr+","+yr+"");
document.forms[0].elements[1].value=monthdayyear;
var timevalue=(""+hours+minutes+seconds+""+ampm);
document.forms[0].elements[2].value=timevalue;
timerid=settimeout("time()",1000);
timerrunning=true;
}
</script>
</head>
<body onload="startclock()">
<center>javascript电子表</center>
<br>
<center>
<form>
<table border=3 width=500>
<tr>
<td align="center"><font color=800000 size=+1><strong>今天星期</strong></font>
<td align="center"><input type="text"name="local"size=13 value="weekday">
</tr>
<tr>
<td align="center"><font color=800000 size=+1><strong>日期</strong></font>
<td align="center"><input type="text" name="local" size=22 value="日期">
</tr>
<tr>
<td align="center"><font color=800000 size=+1><strong>时间</strong></font>
<td align="center"><input type="text" name="local" size=16 value="时间">
</tr>
</table>
<br>
<table border=0 widtn=400>
<tr>
<td align="center"><input type="button" value="停止" onclick="stopclock()">
<td align="center"><input type="button" value="继续" onclick="startclock()">
<td align="center"><input type="button" value="信息" onclick="info()">