jquery插件jTimer(jquery定时器)使用方法


Posted in Javascript onDecember 23, 2013
(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实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
mocha的时序规则讲解
Feb 16 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
jquery实现图片翻页效果
Dec 23 #Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 #Javascript
JS判断对象是否存在的10种方法总结
Dec 23 #Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 #Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 #Javascript
js中判断对象是否为空的三种实现方法
Dec 23 #Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 #Javascript
You might like
十天学会php之第二天
2006/10/09 PHP
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
javascript常用函数(1)
2015/11/04 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
layui 表格的属性的显示转换方法
2018/08/14 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
JavaScript代码实现简单计算器
2020/12/27 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
用Python实现最速下降法求极值的方法
2019/07/10 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
司法助理专业自荐书
2014/06/13 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书