编程 Javascript

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 相关文章推荐

简单实用的反馈表单无刷新提交带验证

Nov 15 Javascript

js选择并转移导航菜单示例代码

Aug 19 Javascript

浅析javascript操作 cookie对象

Dec 26 Javascript

js实现类似MSN提示的页面效果代码分享

Aug 24 Javascript

JavaScript结合Bootstrap仿微信后台多图文界面管理

Jul 22 Javascript

bootstrap-table实现服务器分页的示例（spring 后台）

Sep 01 Javascript

移动web开发之touch事件实例详解

Jan 17 Javascript

对vue 键盘回车事件的实例讲解

Aug 25 Javascript

详解Vue中组件的缓存

Apr 20 Javascript

微信小程序如何自定义table组件

Jun 29 Javascript

angular中的post请求处理示例详解

Jun 30 Javascript

如何实现echarts markline标签名显示自己想要的

Jul 20 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