需要一个计时器来计数并在 jquery 中显示进度答案

【问题标题】：need a timer which counts and show progress in jquery需要一个计时器来计数并在 jquery 中显示进度
【发布时间】：2012-01-13 08:45:19
【问题描述】：

我需要一个像这样计数和显示进度的计时器：

在中间会有一个计时 2 分钟。如何在 jQuery 中做到这一点？

【问题讨论】：

为什么是-1，如果没有人可以帮助我，那么请不要做-1
-1，因为它表明缺乏努力。否决票应该鼓励你更多地考虑这个问题，而不是仅仅要求别人为你做这件事
可能重复stackoverflow.com/questions/8136673/…
这不是“请制作我的代码”网站
@johan m 不要求为我编码。我问你是否知道任何靠近它的插件。

标签： javascript jquery-ui jquery javascript-events

【解决方案1】：

您可以使用画布在现代浏览器上实现它。我看了看 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> 元素内。这样做 - 实现一个后备逻辑 - 不支持画布元素的旧浏览器至少可以显示倒计时。如果你不需要这种优化，这个小提琴只使用一个画布来显示文本和图形：http://jsfiddle.net/9L48R/

我留给你用 jQuery 构造替换 javascript 语句。

【讨论】：