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 相关文章推荐
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 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面向对象法则
2012/02/23 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
非常实用的php验证码类
2016/05/15 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
javascript history对象详解
2017/02/09 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
python求解水仙花数的方法
2015/05/11 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
学习Django知识点分享
2019/09/11 Python
python实现与redis交互操作详解
2020/04/21 Python
Python txt文件如何转换成字典
2020/11/03 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
绩效专员岗位职责
2013/12/02 职场文书
小学母亲节活动方案
2014/03/14 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
高中语文教学反思范文
2016/02/16 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏