1、首先，第一步，打开你的Dreamweaver，新建一个页面（这就是废话=_=）
2、第二步，策划。。这步还是很有意义的，养成好习惯。想一想做一个什么样的计时器，最重要的就是想一下外表。（关键代码都一样）一个好看的外表是一个好的计时器最关键的一步！一般计时器有以下几种：1、input显示。如图。2、浮动DIV显示（这是最好的方式，就是浮动DIV麻烦）3、弹窗显示（不能看到动态了，效果较差）效果如图。4、”固定“在页面某一位置的计时器。固定的方法嘛，如图。相信有了这些介绍，你一定对计时器的样式有所了解了吧。不过小编不是来教做界面的，我是来写核心代码滴。界面神马的自己搞定吧。
3、第三步，介绍计时器的原理。以input显示的计时器为例，这样可以更直观的看到计时器的动态效果。所谓计时器，它的计时功能其实就是依靠javascript的一个函数来进行的。这个函数就是setInterval("function()",time)；这个函数有两个参数，第一个参数是执行的js命令，第二个参数是时间间隔，这个函数的作用就是，在设定时间间隔后重复执行js命令，直到页面被关闭或者clearInterval()函数停止它。例如：var se;se=setInterval("alert(lalalala)",1000)；这个名叫se的计时器将会让页面每1000毫秒弹窗一次，直到页面关闭或者clearInterval(se);出现。怎么样，够详细了吧。
4、第四步，代码。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> --------------------------------------------------------------------------------
5、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里。只是显示方式你可以修饰一下。