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 ...
随机推荐
- 关于springMVC的日志管理
主要是基于在spring aop特性. 1. 创建一个系统日志的操作类,类里面提供一个方法,可以向数据库或者表中写入:访问用户名,访问IP,操作时间,访问包名,具体函数名. /** * @Name S ...
- PE、PB、PEG三大估值法的正确使用方法！
目前市面上的估值方法有很多,比如PE估值法.PB估值法.PEG估值法,但是我相信,真正会用的人并不多,比如说目前动态市盈率121倍的比亚迪真的高估吗?比如目前市净率为0.63倍的众泰汽车真的是破净股吗 ...
- xpinyin模块
import xpinyin s = xpinyin.Pinyin() #一个实例化,以后了解 print(s.get_pinyin('小小军')) #get_pinyin方法,转出来的拼音,每一个汉 ...
- MAC OSX Xcode硬盘清理
1.移除对旧设备的支持影响:可重新生成:再连接旧设备调试时,会重新自动生成.我移除了4.3.2, 5.0, 5.1等版本的设备支持.路径:~/Library/Developer/Xcode/iOS D ...
- RabbitMQ的消息确认机制
一:确认种类 RabbitMQ的消息确认有两种. 一种是消息发送确认.这种是用来确认生产者将消息发送给交换器,交换器传递给队列的过程中,消息是否成功投递.发送确认分为两步,一是确认是否到达交换器,二是 ...
- 点击刷新验证码所需要的onclick函数
<img src="__APP__/Public/verify" onclick="this.src=this.src+'?'+Math.random()" ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果；
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- Java学习之路-Hessian学习
Hessian是基于HTTP的轻量级远程服务解决方案,Hessian像Rmi一样,使用二进制消息进行客户端和服务器端交互.但与其他二进制远程调用技术(例如Rmi)不同的是,它的二进制消息可以移植其他非 ...
- java中equals()和==的区别
java中的数据类型 基础数据类型 基础数据类型有byte.short.char.int.long.float.double.bool.String.除了 String 会比较地址,其它的基础类型的比 ...
- 如何发布第一个属于自己的npm包 到公网
发布前的准备 1. 注册一个npm账号 前往NPM官网进行注册 2. 创建一个简单的包 在本地创建一个项目文件夹 mannymu_demo (名字自己取,不要和NPM上已有的包名重复冲突就好)然后通过 ...