学步园

（转）：biuuu，来源：http://www.biuuu.com/?p=559

如果使用javascript实现定时可控制效果，一般来说会比较麻烦，效果也很差，这里介绍一个jQuery插件timers定时器，能实现控制播放，无限制定时播放，按时播放等功能，非常实用，对于制作交互性网页，加强用户页面体验，非常实用，jQuery插件timers定时器几种效果如下图：

使用说明
需要使用jQuery库文件(目前版本1.3)和jQuery Timers库文件(目前版本1.1.2)

素材准备
timers定时器控制的效果样式，如打印文字显示效果等

实例代码
一，包含文件部分

1. <script text="text/javascript" src="jquery-1.3.1.min.js"></script>
2. <script text="text/javascript" src="jquery.timers-1.1.2.js"></script>

二，HTML部分

1. <div class="wrapper">
2. <div class="demos">
3. <h3>jQuery插件timers定时器</h3>
4. <h3>可控的定时器</h3>
5. <div class="controlled-interval">
6. <ul></ul>
7. <p><span class="start">开始</span> | <span class="stop">停止</span></p>
8. </div>
9. <h3>无限的定时器</h3>
10. <div class="uncontrolled-interval">
11. <p>临时符号</p>
12. </div>
13. <h3>控制一次</h3>
14. <div class="controlled-timeout">
15. <p>点击停止执行</p>
16. </div>
17. <h3>无限一次</h3>
18. <div class="uncontrolled-timeout">
19. <p>改变</p>
20. </div>
21. </div>
22. </div>

三，Javascript部分(jQuery插件timers定时器调用)

1. <script text="text/javascript">
2. $(document).ready(function(){
3. var demos = $("div.wrapper div.demos");
4. var active = false;
5. $('.controlled-interval', demos).find('.start').css("cursor", "pointer").click(function() {
6. if (!active) {
7. active = !active;
8. $(this).parents("div").find('ul').everyTime(1000, 'controlled', function() {
9. $(this).append("<li>必优博客www.biuuu.com</li>");
10. });
11. }
12. }).end().find('.stop').css("cursor", "pointer").click(function() {
13. if (active) {
14. active = !active;
15. $(this).parents("div").find('ul').stopTime('controlled');
16. }
17. });
18. });
19. </script>

上面实现一个可控制播放效果，当点击开始后，页面打印"必优博客www.biuuu.com"，点击停止后将停止打印，再点击开始又在原有打印基础上继续打印文字，实现javascrip按钮控制播放功能。
定义一个可控制的对象，如demos
定义一个常量active表示是否自动播放
1，开始，在播放对象中查找class类为start，并定义鼠标指针的CSS样式，当点击时触发定时打印，调用timers定时器方法everyTime，原型如下：
everyTime(interval, label, fn, times, belay)具体可查看timers定时器JS库文件

2，停止，原理同上，调用timers定时器方法stopTime，原型如下：
stopTime(label, fn)具体可查看timers定时器JS库文件

timers定时器有三个内置方法，分别如下：
everyTime(interval, label, fn, times, belay)
oneTime(interval, label, fn)
stopTime(label, fn)

分别表示无限，一次和停止时间，其中interval表示毫秒数，label表示标签，fn表示实现的方法，如打印文字等，

其它效果
一，实现每秒打印效果(everyTime()代码同上)，javascrip按钮时间控制功能

1. $(".uncontrolled-interval p", demos).everyTime(1000,function(i) {
2. $(this).html(i);
3. });

二，实现定时效果( oneTime() )，javascrip定时功能

1. var event = function() {
2. $(this).text("请点击!");
3. $(this).stopTime();
4. };
5. $("div.controlled-timeout p", demos).click(event).oneTime("5s", function() {
6. $(this).text("太迟了,时间过了!");
7. $(this).unbind('click', event);
8. });

三，实现一次效果(oneTime())

1. $("div.uncontrolled-timeout p", demos).oneTime(2000, function() {
2. $(this).html("看?");
3. }).oneTime(5000, "soon", function() {
4. $(this).html("不能停止");
5. });

jQuery插件timers定时器可实现多种效果，可定时，可控制定时等，实现javascrip定时或按钮控制功能，对于制作交互网页来说，非常值得推荐。

点我下载 jQuery插件timers定时器实现javascrip定时或按钮控制功能 DEMO