jTimer
很多时候我们需要按时间间隔执行一个任务,当满足一定条件时停止执行.此插件旨在解决这一经常遇到的问题.
jTimer:
(function ($) {
$.extend({
timer: function (action,context,time) {
var _timer;
if ($.isFunction(action)) {
(function () {
_timer = setInterval(function () {
if (!action(context)) {
clearInterval(_timer);
}
}, time);
})();
}
}
});
})(jQuery);
demo:
<!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>
jTimer的更多相关文章
- swing Event-Listener-Adapter 对照表
Source Event Event Listener AbstractButton (JButton,JToggleButton, JCheckBox,JRadioButton ActionEven ...
- 02.lib-v1.js
/* Date: 2014-07-29 4:06:07 [PM] */ function StringBuilder() { this.strings = new Array, this.length ...
- JavaScript倒计时类
(function (){ var jtimer = function() { // init if(arguments.length >= 1) { this.setEndTime(argum ...
随机推荐
- SQL[Err]ORA-00932: inconsistent datatypes: expected NUMBER got CHAR:
ORA-00932: inconsistent datatypes: expected NUMBER got CHAR: 获取的目标类型与源类型不一致,多出现在case when 语句中,when的结 ...
- rpm 包的安装、卸载、升级、查询、验证
关键字: rpm 强制卸载jdk rpm -e j2sdk1.4.2_04 强制覆盖安装jdk rpm -Uvh j2sdk-1_4_1_02-fcs-linux-i586.rpm --force - ...
- Javascript根据id获取数组对象
在业务中,列表页跳转详情页时,经常会将Id值传入,然后再根据id值异步获取数据. 假设有服务端的json数据: <注意,这里的data是指已经从后端获取的json, 而非后端原始的文件> ...
- 3.Python3变量与基本数据类型
3.1保留字和标识符 3.1.1保留字 保留字是Python语言中已经被赋予特定意义的一些单词,开发程序时不可以把保留字作为变量.函数.类.模块和其他对象的名称来使用.保留字如下: 3.1.2标识符 ...
- 用mpvue构建微信小程序
背景 由于机器人协会进行鼓励大家多读书的活动,所以为了可以更好的.更有效果,所以我跟会长提了一个建议,做一个微信小程序,那么为什么是微信小程序呢? 1.现在微信小程序比较好,用户也比较多:利用微信小程 ...
- Sitecore开发 IP地理定位服务入门
如果您是营销人员或开发人员,并且有兴趣在Sitecore安装中使用Sitecore IP Geolocation服务,那么本文就是为您准备的. 借助Sitecore IP地理定位服务,您网站的访问者可 ...
- JavaScript--浅谈!=、!==、==和===的区别
== 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 === 和 !== 只有在相同类型下,才会比较其值 <!DOCTYPE html> <html> ...
- noip单词接龙
看了许多题解都好长啊,自不量力的来贴一下代码 (震惊于这都能ac...) 这道题的思路是先从字符串中找有重部分然后直接比较剩下的部分,比较的数据也可以用来计算数值 其实满水的题 总之看注释啦(竟然能耐 ...
- AR(I)MA时间序列建模过程——步骤和python代码
https://www.jianshu.com/p/cced6617b423 https://zhuanlan.zhihu.com/p/35282988 https://zhuanlan.zhihu. ...
- 收银台数据库存储AES加解密
高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法加密和解密用到的密钥是相同的,这种加密方式加密速度非常快,适合经常发送数据的场合.缺点是密钥的传输 ...