第一步:把如下代码加入<head>区域中
<SCRIPT language=javascript>
<!--
function generate(form){for(var q=0q<12q++){if(document.me.m.options[document.me.m.selectedIndex].value==q){var m2=q+1
}var txt='<!-- 分三步完成全部脚本:\r\n\r\n'
+' 1. 将第一部分粘贴到HTML的HEAD区\r\n'
+' 2. 将OnLoad事件加入BODY标签内\r\n'
+' 3. 将最后一部分代码加入BODY区 -->\r\n\r\n'
+'<!-- 第一步: 将如下代码粘贴到HTML的HEAD区-->\r\n\r\n'
+'<HEAD>\r\n\r\n<SCRIPT LANGUAGE="JavaScript">\r\n\r\n'
+'<!-- Begin\r\n'
+'var Temp2\n'
+'var timerID = null\n'
+'var timerRunning = false\n'
+'function arry() {\n'
+'this.length = 12\n'
+'this[0] = 31\n'
+'this[1] = 28\n'
+'this[2] = 31\n'
+'this[3] = 30\n'
+'this[4] = 31\n'
+'this[5] = 30\n'
+'this[6] = 31\n'
+'this[7] = 31\n'
+'this[8] = 30\n'
+'this[9] = 31\n'
+'this[10] = 30\n'
+'this[11] = 31\n'
+'}\n'
+'var date = new arry()\n'
+'\n'
+'function stopclock() {\n'
+'if(timerRunning)\n'
+'clearTimeout(timerID)\n'
+'timerRunning = false\n'
+'}\n'
+'\n'
+'function startclock() {\n'
+'stopclock()\n'
+'showtime()\n'
+'}\n'
+'\n'
+'function showtime() {\n'
+'now = new Date()\n'
+'var CurMonth = now.getMonth()\n'
+'var CurDate = now.getDate()\n'
+'var CurYear = now.getFullYear()\n'
+'now = null\n'
+'if ('+document.me.d.options[document.me.d.selectedIndex].value+' <CurDate) {\n'
+'CurDate -= date[CurMonth]CurMonth++\n'
+'}\n'
+'if ('+document.me.m.options[document.me.m.selectedIndex].value+' <CurMonth) {\n'
+'CurMonth -= 12CurYear++\n'
+'}\n'
+'\n'
+'var Yearleft = '+document.me.y.options[document.me.y.selectedIndex].value+' - CurYear\n'
+'var Monthleft = '+document.me.m.options[document.me.m.selectedIndex].value+' - CurMonth\n'
+'var Dateleft = '+document.me.d.options[document.me.d.selectedIndex].value+' - CurDate\n'
+'\n'
+'document.dateform.a.value = Yearleft\n'
+'document.dateform.b.value = Monthleft\n'
+'document.dateform.c.value = Dateleft\n'
+'\n'
+'timerID = setTimeout("showtime()",1000)\n'
+'timerRunning = true\n'
+'}\n'
+'/\/ End -->\r\n<\/script>\r\n'
+'<\/H'+'EAD>\r\n\r\n'
+'<!-- 第二步：将OnLoad事件加入BODY标签内 -->\r\n\r\n'
+'<BO'+'DY Onload="startclock()">\r\n\r\n'
+'<!-- 第三步：将最后一部分代码加入BODY区 -->\r\n\r\n'
+'<form name=dateform>距离'
+m2+'/'+document.me.d.options[document.me.d.selectedIndex].value+'/'
+document.me.y.options[document.me.y.selectedIndex].value
+'还有\n'
+'<input type=text name=a size=2 value="">年\n'
+'<input type=text name=b size=2 value="">月\n'
+'<input type=text name=c size=2 value="">天\n'
+'</fo'+'rm>\r\n\r\n'
+'<'+'!-- 代码长度: 1.95 KB --'+'>'
}document.mail.source.value=txtdocument.mail.source2.value=txt}
//-->
</SCRIPT>
第二步:把如下代码加入区域中：
<center>
<table border=5 bordercolor=blue borderlight=green>
<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>下面框中为脚本显示区</strong></font></td></tr>
<tr><td align=center><form name=me><p><select name=m size=1><option value=0>January </option><option value=1>February </option><option value=2>March </option><option value=3>April </option><option value=4>May </option><option value=5>June </option><option value=6>July </option><option value=7>August </option><option value=8>September </option><option value=9>October </option><option value=10>November </option><option value=11>December </option></select><select name=d size=1><option value=1>1 </option><option value=2>2 </option><option value=3>3 </option><option value=4>4 </option><option value=5>5 </option><option value=6>6 </option><option value=7>7 </option><option value=8>8 </option><option value=9>9 </option><option value=10>10 </option><option value=11>11 </option><option value=12>12 </option><option value=13>13 </option><option value=14>14 </option><option value=15>15 </option><option value=16>16 </option><option value=17>17 </option><option value=18>18 </option><option value=19>19 </option><option value=20>20 </option><option value=21>21 </option><option value=22>22 </option><option value=23>23 </option><option value=24>24 </option><option value=25>25 </option><option value=26>26 </option><option value=27>27 </option><option value=28>28 </option><option value=29>29 </option><option value=30>30 </option><option value=31>31 </option></select><select name=y size=1><option value=1999>1999 </option><option value=2000>2000 </option><option value=2001>2001 </option><option value=2002>2002 </option><option value=2003>2003 </option><option value=2004>2004 </option><option value=2005>2005 </option><option value=2006>2006 </option><option value=2007>2007 </option><option value=2008>2008 </option><option value=2009>2009 </option></select><br><input type=button onclick=generate() value=生成代码 class=yk9><input type=button value=返回 onClick=history.go(-1) name=button class=yk9><p></p></form><form name=mail><input type=hidden name=scriptname value="Countdown Creator"><input type=hidden name=source2 value><table bgcolor=dedfdf border=1 cellpadding=1 width=396><tr><td align=center height=218><textarea name=source rows=12 cols=55 class=yk9></textarea><br><br></td><td></td></tr></table></form></td></tr></table>
首先需要理清正时计和倒计时,即什么情况下使用计时,正倒计时的区别是什么.假设有一个时钟,起始点是0点,那么正计时,就相当于码表,是计算"使用的时间".
倒计时则相反,是"还剩多少时间",即作为基准的时间点并不是现在.
比较两个时间做差,那么必定有一个恒定值,和一个即时值.即时值一般就是动态的系统时间
正计时:即时值-设定值
倒计时:设定值-即时值.
所以JS做计时器,就得有一个setinterval,用于定期启动计时器
一个计录恒定值的全局变量.
以及一个随着计时器不断更新的即时时间.
谁减谁就是由你的需求决定了
JS可以实现很多java代码不易完成的功能。这里学习一些js中的计时器事件。
JavaScript 一个设定的时间间隔之后来执行代码，称之为计时事件。
主要通过两个方法来实现：
1.setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
2.setTimeout() - 暂停指定的毫秒数后执行指定的代码
并且，这两个方法都是window对象的方法。
首先，介绍setInterval()方法，该方法值得是间隔一定的毫秒数不停的执行指定的代码。
语法：window.setInterval(”js代码，函数等“，毫秒数)
实例1：每三秒弹出一个hello
setInterval(function(){alert("Hello")},3000)
实例2：显示当前时间，通过按钮实现时间的停止，开始
<script type="text/javascript">
var myVar
function startTimer(){
/*setInterval() 间隔指定的毫秒数不停地执行指定的代码*/
myVar=setInterval(function(){myTimer()},1000)
}
function myTimer()/* 定义一个得到本地时间的函数*/
{
var d=new Date()
var t=d.toLocaleTimeString()
document.getElementById("demo").innerHTML=t
}
function stopTimer()
{/* clearInterval() 方法用于停止 setInterval() 方法执行的函数代码*/
clearInterval(myVar)
}
</script>
setTimeout() 方法
在html或jsp中
<body>
<h4 id="demo"></h4>
<input type="button" onclick="startTimer()" value="开始">
<input type="button" onclick="stopTimer()" value="停止">
</body>
对于setTimeout()方法，指的是指定的毫秒数后执行指定的代码或方法。
语法：window.setTimeout("javascript 函数",毫秒数)
实例1：3秒钟后弹出”hello“提示框
setTimeout(function(){alert("Hello")},3000)
实例2：三秒钟后跳转到前一个页面
<script type="text/javascript">
setTimeout(function(){
window.history.back()
},3000)
</script>
如何执行停止呢？
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。这里注意myVar必须是一个全局变量。实例如下：
var myVar
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000)
}
function myStopFunction()
{
clearTimeout(myVar)
}
以上就把js计时器的基本功能简要介绍了，具体的使用场景，想要深刻理解，只有到项目用到时方可有新的理会。
