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 ...
随机推荐
- IntelliJ IDEA 注册码激活
IntelliJ IDEA 注册码激活 方法一:使用激活服务器激活方法 步骤 1.打开注册/激活窗口: 2.选择 License server: 3.填入上述其中一个网址(如:http://idea. ...
- linux安装jdk mysql
mysql 安装进入到mysql官网 点击archives 选择版本下载tar linux 安装mysql数据库——tar.gz包解压安装法 mysql数据库有多种安装方式,本文只介绍在Linux服务 ...
- css3之动画属性transform、transition、animation
工作当中,会遇到很多有趣的小动画,使用css3代替js会节省工作量,css3一些属性浏览器会出现不兼容,加浏览器的内核前缀 -moz-. -webkit-. -o- 1.transform rotat ...
- Vsftp搭建 for centos7
[root@hys ~]# uname -a Linux hys 3.10.0-693.el7.x86_64 #1 SMP Tue Aug 22 21:09:27 UTC 2017 x86_64 x8 ...
- git：当本地分支中的代码和develop分支上有很多冲突，希望删掉本地分支，重新建立新的分支，怎么解决？
git:当本地分支中的代码和develop分支上有很多冲突,希望删掉本地分支,重新建立新的分支,但是git中说你需要先解决当前的冲突,这种情况怎么解决 这种情况可以在代码编辑器中点击commit,然后 ...
- 018-并发编程-java.util.concurrent.locks之-ReentrantReadWriteLock可重入读写锁
一.概述 ReentrantLock是一个排他锁,同一时间只允许一个线程访问,而ReentrantReadWriteLock允许多个读线程同时访问,但不允许写线程和读线程.写线程和写线程同时访问.相对 ...
- qt 安装包生成2
使用Qt Installer Framework制作安装包 2018年07月01日 03:45:37 大黄老鼠 阅读数:878 标签: qt更多 个人分类: Qt 版权声明:本文为博主原创文章,未 ...
- day02 Python列表的增删查改及常用操作
列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li = [‘alex’,12 ...
- Spring Boot IoC 容器初始化过程
1. 加载 ApplicationContextInializer & ApplicationListener 2. 初始化环境 ConfigurableEnvironment & 加 ...
- 精练代码：一次Java函数式编程的重构之旅
摘要:通过一次并发处理数据集的Java代码重构之旅,展示函数式编程如何使得代码更加精练. 难度:中级 基础知识 在开始之前,了解"高阶函数"和"泛型"这两个概念 ...