教你用javascript制作计时器
计时器（闹钟、钟表）这个东西说大不大说小不小，虽然不起眼，但总有些地方非需要它不可。一个漂亮的计时器-----特别是
动态计时器，有时候还挺重要。至于用什么做，当然是强大的
javascript啦，HTML5貌似也可以，但是这个我没有深入研究，以后有时间在研究一下吧。
注意，这里是
计时器，
不是日期选择器。
操作方法
- 01
首先， 第一步，打开你的 Dreamweaver， 新建一个页面（这就是废话=_=）
- 02
第二步，策划。。 这步还是很有意义的，养成好习惯。 想一想做一个什么样的计时器，最重要的就是想一下外表。（关键代码都一样） 一个好看的外表是一个好的计时器最关键的一步！ 一般计时器有以下几种： 1、 input显示。如图。 2、 浮动DIV显示（这是最好的方式，就是浮动DIV麻烦） 3、 弹窗显示（不能看到动态了，效果较差）效果如图。 4、 ”固定“在页面某一位置的计时器。固定的方法嘛，如图。 相信有了这些介绍，你一定对计时器的样式有所了解了吧。 不过小编不是来教做界面的，我是来写核心代码滴。 界面神马的自己搞定吧。
- 03
第三步，介绍计时器的原理。 以input显示的计时器为例，这样可以更直观的看到计时器的动态效果。 所谓计时器，它的 计时功能其实就是依靠javascript的一个函数来进行的。 这个函数就是 setInterval("function()",time)； 这个函数有 两个参数，第一个参数是 执行的js命令，第二个参数是 时间间隔，这个函数的作用就是， 在设定时间间隔后重复执行js命令，直到页面被关闭或者clearInterval()函数停止它。 例如： var se; se=setInterval("alert(lalalala)",1000)； 这个名叫se的计时器将会让页面每1000毫秒弹窗一次，直到页面关闭或者 clearInterval(se);出现。 怎么样，够详细了吧。
- 04
第四步，代码。 javascript代码如下： -------------------------------------------------------------------------------- <script language="javascript"> var se,m=0,h=0,s=0,ss=1; function second(){ if((ss%100)==0){s+=1;ss=1;} if(s>0 && (s%60)==0){m+=1;s=0;} if(m>0 && (m%60)==0){h+=1;m=0;} t=h+"时"+m+"分"+s+"秒"+ss+"毫秒"; // 时分秒运算 document.getElementById("showtime").value=t; // 这有一个给id为showtime的input赋值的语句，可以实现动态计时。 // 其实所谓的动态计时，就是在很短的时间里不停给显示时间的地方更新数值，由于速度很快，这样计时器看起来时刻都在变化。但其实不是的，它从本质上还是静态的，这跟js的伪多线程原理是一样的。 ss+=1; } function startclock(){se=setInterval("second()",1);} // 这个函数是要放到按钮的click事件上的 function pauseclock(){clearInterval(se);} // 这个函数是要放到按钮的click事件上的 function stopclock(){clearInterval(se);ss=1;m=h=s=0;} // 这个函数是要放到按钮的click事件上的 </script> --------------------------------------------------------------------------------
- 05
html代码如下： -------------------------------------------------------------------------------- <input name="s" type="button" value="开始计时" onClick="startclock()"> <input name="s" type="button" value="暂停计时" onClick="pauseclock()"> <input name="s" type="button" value="停止计时" onClick="stopclock()"> <input name="showtime" style="color:#ff0000;width:200px;" id="showtime"type="text" value="0时0分0秒"> -------------------------------------------------------------------------------- 四个input，其中三个是按钮："开始计时"、"暂停计时"、"停止计时" 。 还有一个是时间显示。这个input可以放到其他地方，比如一个浮动DIV里。 只是显示方式你可以修饰一下。