нужен таймер, который считает и показывает прогресс в JQuery - PullRequest
Новая
       20

нужен таймер, который считает и показывает прогресс в JQuery

0 голосов
/ 13 января 2012

Мне нужен таймер, который считает и показывает прогресс следующим образом:

enter image description here

, а в центре будет счетчик, который считает 2 минуты.Как я могу сделать это в JQuery?

1 Ответ

4 голосов
/ 13 января 2012

вы можете реализовать его в современном браузере, используя canvas.Я посмотрел на https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes в разделе «Дуги» и пришел к этому решению (скрипта связана ниже)

HTML5 

<!DOCTYPE HTML>
<html>  
    <head>  
      <title>Canvas circular timer</title>  
    </head>
    <body>  
        <div>
            <canvas id="timer" width="100" height="100"></canvas>
            <span id="counter">20</span>
        </div>
    </body>  
</html>

CSS 

canvas {
   -webkit-transform : rotate(-90deg);  
   -moz-transform : rotate(-90deg);
}

div { position: relative; z-index: 1; height: 100px; width: 100px; }
div span {
    position   : absolute;
    z-index    : 1;
    top        : 50%;
    margin-top : -0.6em;
    display    : block;
    width      : 100%;
    text-align : center;
    height     : 1.5em;
    color      : #0e0;
    font       : 1.5em Arial;
}

Javascript 

window.onload = function() {
    var canvas  = document.getElementById('timer'),
        seconds = document.getElementById('counter'),
        ctx     = canvas.getContext('2d'),
        sec     = seconds.innerHTML | 0,
        countdown = sec;

    ctx.lineWidth = 6;
    ctx.strokeStyle = "#00EE00";

    var
    startAngle = 0,
    time       = 0,
    intv       = setInterval(function(){

        var endAngle = (Math.PI * time * 2 / sec);
        ctx.arc(50, 50, 35, startAngle , endAngle, false);   
        startAngle = endAngle;
        ctx.stroke();

        seconds.innerHTML = countdown--;

        if (++time > sec) { clearInterval(intv); }

    }, 1000);

}

Вы можете увидеть пример jsFiddle: http://jsfiddle.net/2qyEv/ (пробовал с Mozillaи webkit)

Обратите внимание, что оставшиеся секунды не записываются внутри холста, а находятся внутри элемента <span>, расположенного над холстом.Это сделано так - реализуя запасную логику - старый браузер, не поддерживающий элемент canvas, мог показать хотя бы обратный отсчет.Если вам не нужна такая оптимизация, эта скрипка использует только канву для текста и графики: http://jsfiddle.net/9L48R/

Я оставляю вам замену операторов javascript конструкциями jQuery.

...