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="https://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>
<p id="wrap">
<canvas id="cvs" height="400" width="500"></canvas>
</p>
</body>
</html>
上一篇： ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
下一篇： 电商 抖音蓄谋已久