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 数组的 uniq 方法
Jan 23 Javascript
javascript 无提示关闭窗口脚本
Aug 17 Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 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
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
答题辅助python代码实现
2018/01/16 Python
Django中Forms的使用代码解析
2018/02/10 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
django的model操作汇整详解
2019/07/26 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
构造方法和其他方法的区别
2016/04/26 面试题
中间件的定义
2016/08/09 面试题
趣味活动策划方案
2014/02/08 职场文书
教师自我鉴定范文
2014/03/20 职场文书
技术合作协议书范本
2014/04/18 职场文书
施工工地安全标语
2014/06/07 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
个人查摆剖析材料
2014/10/16 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
python - asyncio异步编程
2021/04/06 Python