萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jquery插件jTimer(jquery定時器)使用方法

jquery插件jTimer(jquery定時器)使用方法

很多時候我們需要按時間間隔執行一個任務,當滿足一定條件時停止執行.此插件旨在解決這一經常遇到的問題   代碼如下: (function ($) {     $.extend({         timer: function (action,context,time) {             var _timer;             if ($.isFunction(action)) {                 (function () {                     _timer = setInterval(function () {                         if (!action(context)) {                             clearInterval(_timer);                         }                     }, time);                 })();             }         }     }); })(jQuery);     代碼如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>畫布</title>     <script src="../script/jquery.min.js"></script>     <script src="../script/jTimer.js"></script>     <style type="text/css">         #wrap         {             display: table;             margin: 0 auto;         }           #cvs         {             display: table-cell;             vertical-align: middle;         }     </style>     <script type="text/javascript">         function drawRound(context) {                         if (context.counterclockwise) {                 draw(context.x, context.y, context.r, context.start, context.start - Math.PI / 50, context.counterclockwise);                 context.start -= Math.PI / 50;                 return context.start > 0.5 * Math.PI;             }             else {                 draw(context.x, context.y, context.r, context.start, context.start + Math.PI / 50, context.counterclockwise);                 context.start += Math.PI / 50;                 return context.start < Math.PI;             }         }         function draw(x, y, r, sAngle, eAngle, counterclockwise) {             var cvs = document.getElementById("cvs");             ctx = cvs.getContext("2d");             ctx.strokeStyle = "#f00";             ctx.beginPath();             ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);             ctx.stroke();         }         $(function () {             $.timer(drawRound, { x: 100, y: 100, r: 50, start: 1.5 * Math.PI, counterclockwise: true }, 200);             $.timer(drawRound, { x: 100, y: 100, r: 60, start: 0, counterclockwise: false }, 200);         });     </script> </head> <body>     <div id="wrap">         <canvas id="cvs" height="400" width="500"></canvas>     </div> </body> </html>    
copyright © 萬盛學電腦網 all rights reserved