Home > Developer > JavaScript
Jquery plugin jTimer (jquery timer) Usage
In many cases, we need to execute a task at intervals and stop it when certain conditions are met. This plug-in is designed to solve this common problem.
The Code is as follows:
(Function ($ ){
$. Extend ({
Timer: function (action, context, time ){
Var _ timer;
If ($. isFunction (action )){
(Function (){
_ Timer = setInterval (function (){
If (! Action (context )){
ClearInterval (_ timer );
}
}, Time );
})();
}
}
});
}) (JQuery );
The Code is as follows:
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> canvas </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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
