WEB开发网
开发学院网页设计JavaScript javascript电子表 阅读

javascript电子表

 2007-11-27 17:45:51 来源:WEB开发网   
核心提示: 在这个例子中将用JAVASCRIPT实现一个电子表,它是动态的,javascript电子表,窍门在于时间对象的构造和setTimeout、clearTimeout方法的调用,以下是实现动态显示电子表的程序清单,最关键的东西就是setTimeout(time(),1000),它每隔1秒(等于1000毫秒)调用一

  在这个例子中将用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=textNAME=localSIZE=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()>
<TD align=center><input type=reset value=重置>
</tr>

</table><br>
</form></center>
</body></html>  

Tags:avascript 电子表

编辑录入:coldstar [复制链接] [打 印]
赞助商链接