javascript中的Timer功能

最新推荐文章于 2022-11-18 16:53:57 发布

dujingjing1230

最新推荐文章于 2022-11-18 16:53:57 发布

阅读量2.6k

点赞数

分类专栏： Javascript 文章标签： javascript timer image function button .net

本文链接：https://blog.csdn.net/dujingjing1230/article/details/4179276

版权

Javascript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

刚写了不少东西忘了保存,真倒霉。。。不过没事。以前都不知道javascript还可以进行事件处理。而且被不同的人用的好让人觉得这个功能不错。

再次声明下,我真的是javascript新手,所以大家鄙视我写这些初级的东西的话就鄙视吧。^_^.

说实话这个东东和.net中的timer出不多,我估计.net中的那个timer就是这个东东基础上开发出来的。不扯了。先说说它怎么来计时。

在W3C中第一次看到javascript Timing Events,它对这个功能的介绍就是说能够在一定得时间执行你的一些代码。使用很简单，但是用好了确实很amazing的。它主要有两个方法:

setTimeout()---用来在一段时间后执行某段代码。还有一个是clearTimeout()---取消setTimeout这个方法的执行。也就是停止计时。

先看看setTimeout方法的语法:

var t=setTimeout("javascript statement",milliseconds);

这个方法又两个参数,javascript statement和milliseconds,前面的参数可以使某段javascript也可以使某个javascript的方法比如:"alert(5 seconds!)",或者已经写到html中的一个方法"alertMsg()"。第二个参数就不用说了明显是个毫秒计时,也就是多少毫秒后执行以下前面这段javascript。看个例子:

<html> <head> <script type="text/javascript"> function timeMsg() { var t=setTimeout("alert('U waste 5 seconds!'))",50000); } </head> <body> <form> <input type="button" value="Display timed alertbox!" on click="timeMsg()" /> </form> </body> </html>

计时5秒然后弹出个alertbox,你可以试着运行一下，有意外收获。

如果是要一个setTimeout()方法不停的计时,很简单的做法就是不停的call itself. 这虽然简单但是第一个想到这个办法的人真的很厉害。

下面给个例子:

你可能注意到setTimeout()这个方法有个返回值,也就是上面例子中的t,它到底有啥用呢，可能你已经猜到了,它是用来停止计时的。也就是clearTimeout()方法所需要的参数。例如:clearTimeout(t)就可以停止这个计时。

你可能现在觉得这很差劲,很简单。不错，功能确实很简单，但是我下面给你几个例子你估计就会发现很多动作都可以使这个setTimeout()方法能够实现的。

先看个图:

Digital

<table> <td bgcolor="black" height="45"> <img src="dg8.gif" mce_src="dg8.gif" name="hr1"><img src="dg8.gif" name="hr2"><img src="dgc.gif" name="c"><img src="dg8.gif" name="mn1"><img src="dg8.gif" name="mn2"><img src="dgc.gif" name="c"><img src="dg8.gif" name="se1"><img src="dg8.gif" name="se2"><img src="dgpm.gif" name="ampm"> </td></table> <mce:script type="text/javascript"></mce:script>

上图就是用timer来实现的。呵呵。不错吧。还有很多万年历也是用这个timer来写的。轻量级的,绝对适合你用到自己的网站上。

下面再给大家看个东东不是钟表也不是电子表了而是动态效果的例子,先看看代码:

<mce:script type="text/javascript"></mce:script> <div id="wooYayMessage" style="height: 1.5em; font-size: 2em; color: red;"></div> <input type="button" name="clickMe" id="wooYayButton" value="Click me!" οnclick="wooYayClickHandler()"/>

这个脚本可以实现美妙随即的显示"Woo!"和"Yay!"字样。有点flash的感觉。

dujingjing1230

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript中的Timer功能

刚写了不少东西忘了保存,真倒霉。。。不过没事。以前都不知道javascript还可以进行事件处理。而且被不同的人用的好让人觉得这个功能不错。再次声明下,我真的是javascript新手,所以大家鄙视我写这些初级的东西的话就鄙视吧。^_^.说实话这个东东和.net中的timer出不多,我估计.net中的那个timer就是这个东东基础上开发出来的。不扯了。先说说它怎么来计时。
复制链接

扫一扫