jquery插件jTimer(jquery定時(shí)器)使用方法

2024-05-06 15:58:29

字體：大中小

供稿：網(wǎng)友

很多時(shí)候我們需要按時(shí)間間隔執(zhí)行一個(gè)任務(wù),當(dāng)滿足一定條件時(shí)停止執(zhí)行.此插件旨在解決這一經(jīng)常遇到的問(wèn)題

復(fù)制代碼代碼如下:

復(fù)制代碼代碼如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>畫(huà)布</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>
        <canvas></canvas>
    </div>
</body>
</html>