jquery插件jTimer(jquery定时器)使用方法 - Web前端

作者：98wpeu发布时间：2026-07-25分类：网页前端技术浏览：159

导读：复制代码代码如下:(function($){ $.extend({ timer:function(action,context,time){ ...

复制代码代码如下:
(function ($) {
    $.extend({
        timer: function (action,context,time) {
            var _timer;
            if ($.isFunction(action)) {
                (function () {
                    _timer = SetInterval(function () {
                        if (!action(context)) {
                            clearinterval(_timer);
                        }
                    }, time);
                })();
            }
        }
    });
})(JQuery);

复制代码代码如下:
<!DOCtypehtml>
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<head>
    <metaHTTP-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>

标签：定时器使用方法插件 Web jTimer jquery

上一篇：jquery导航制件jquery鼠标经过变色效果示例 - Web前端
下一篇：jQuery遍历Table应用示例 - Web前端

jquery插件jTimer(jquery定时器)使用方法 - Web前端

相关推荐