多语言展示
当前在线:1831今日阅读:183今日分享:19

教你用javascript制作计时器

计时器(闹钟、钟表)这个东西说大不大说小不小,虽然不起眼,但总有些地方非需要它不可。一个漂亮的计时器-----特别是动态计时器,有时候还挺重要。至于用什么做,当然是强大的javascript啦,HTML5貌似也可以,但是这个我没有深入研究,以后有时间在研究一下吧。注意,这里是计时器,不是日期选择器。
工具/原料
1

Dreamweaver 8 或CS5/6

2

Javascript

方法/步骤
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代码如下:--------------------------------------------------------------------------------  --------------------------------------------------------------------------------

5

html代码如下:--------------------------------------------------------------------------------          --------------------------------------------------------------------------------四个input,其中三个是按钮:'开始计时'、'暂停计时'、'停止计时' 。还有一个是时间显示。这个input可以放到其他地方,比如一个浮动DIV里。只是显示方式你可以修饰一下。

注意事项
1

乱码问题有可能会出现。你可以关注我,看我以前写的东西,有一篇是关于解决网页乱码的。

2

计时器需要一个好看的外观,所以记得做外表。

推荐信息