当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery插件jTimer(jquery定时器)使用方法

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

2019年03月20日  | 移动技术网IT编程  | 我要评论

代码如下:


(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="https://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>
    <p id="wrap">
        <canvas id="cvs" height="400" width="500"></canvas>
    </p>
</body>
</html>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网