jquery插件jTimer(jquery定时器)使用方法
jquery插件jTimer(jquery定时器)使用方法
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:(function($){$.extend({timer:function(action,context,time){va...

复制代码 代码如下:

(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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类