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

JavaScript 数组的 uniq 方法

Jan 23 Javascript

javascript 无提示关闭窗口脚本

Aug 17 Javascript

通过Mootools 1.2来操纵HTML DOM元素

Sep 15 Javascript

jquery1.83 之前所有与异步列队相关的模块详细介绍

Nov 13 Javascript

总结JavaScript中布尔操作符||与&&的使用技巧

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