教你用javascript制作计时器

来源：互联网 2023-03-17 00:48:11 480

计时器（闹钟、钟表）这个东西说大不大说小不小，虽然不起眼，但总有些地方非需要它不可。一个漂亮的计时器-----特别是动态计时器，有时候还挺重要。至于用什么做，当然是强大的javascript啦，HTML5貌似也可以，但是这个我没有深入研究，以后有时间在研究一下吧。

注意，这里是计时器，不是日期选择器。

工具/原料

Dreamweaver 8 或CS5/6
Javascript

方法/步骤

首先，第一步，打开你的Dreamweaver，新建一个页面（这就是废话=_=）

教你用javascript制作计时器

第二步，策划。。

这步还是很有意义的，养成好习惯。

想一想做一个什么样的计时器，最重要的就是想一下外表。（关键代码都一样）

一个好看的外表是一个好的计时器最关键的一步！

一般计时器有以下几种：

1、input显示。如图。

2、浮动DIV显示（这是最好的方式，就是浮动DIV麻烦）

3、弹窗显示（不能看到动态了，效果较差）效果如图。

4、”固定“在页面某一位置的计时器。固定的方法嘛，如图。

相信有了这些介绍，你一定对计时器的样式有所了解了吧。

不过小编不是来教做界面的，我是来写核心代码滴。

界面神马的自己搞定吧。

教你用javascript制作计时器

第三步，介绍计时器的原理。

以input显示的计时器为例，这样可以更直观的看到计时器的动态效果。

所谓计时器，它的计时功能其实就是依靠javascript的一个函数来进行的。

这个函数就是setInterval("function()",time)；

这个函数有两个参数，第一个参数是执行的js命令，第二个参数是时间间隔，这个函数的作用就是，在设定时间间隔后重复执行js命令，直到页面被关闭或者clearInterval()函数停止它。

例如：

var se;

se=setInterval("alert(lalalala)",1000)；

这个名叫se的计时器将会让页面每1000毫秒弹窗一次，直到页面关闭或者

clearInterval(se);出现。

怎么样，够详细了吧。

教你用javascript制作计时器

3该信息未经许可获取自百度经验

第四步，代码。

javascript代码如下：

--------------------------------------------------------------------------------

script language="javascript">

var se,m=0,h=0,s=0,ss=1;

function second(){

if((ss0)==0){s =1;ss=1;}

if(s>0 && (s`)==0){m =1;s=0;}

if(m>0 && (m`)==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>

--------------------------------------------------------------------------------

教你用javascript制作计时器

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里。

只是显示方式你可以修饰一下。

注意事项

乱码问题有可能会出现。你可以关注我，看我以前写的东西，有一篇是关于解决网页乱码的。
计时器需要一个好看的外观，所以记得做外表。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JAVASCRIPT

上一篇：js数组操作大全下一篇：js(JavaScript)数组操作

教你用javascript制作计时器

工具/原料

方法/步骤

注意事项

热门文章

标签列表