javascript - 如何使用JS将计时器绑定(bind)到进度环？

我在玩进度环，但似乎无法让它在计时器上运行。我正在尝试使进度环自动传播，并说从0.5％到我设置的任何百分比（本例中为65％）需要0.5秒。

我以这个进度环为基础：http://llinares.github.io/ring-progress-bar/

这是我的小提琴：http://jsfiddle.net/gTtGW/

我尝试使用计时器功能，但可能未正确集成。在小提琴中，我添加了：

for (var i = 0; i< 65; i++){
        range += i;
        setTimeout(timer,800);
    }

但是，这会中断进度环。我以为只要更新范围（用+ = i），就会调用draw函数。我究竟做错了什么？提前非常感谢您。

最佳答案

如果您不打算使用input[type=range]元素，则可以将代码更改为此：

(function (window) {
'use strict';

var document = window.document,
    ring = document.getElementsByTagName('path')[0],
    range = 0,
    text = document.getElementsByTagName('text')[0],
    Math = window.Math,
    toRadians = Math.PI / 180,
    r = 100;

function draw() {
    // Update the wheel giving to it a value in degrees, getted from the percentage of the input value a.k.a. (value * 360) / 100
    var degrees = range * 3.5999,
        // Convert the degrees value to radians
        rad = degrees * toRadians,
        // Determine X and cut to 2 decimals
        x = (Math.sin(rad) * r).toFixed(2),
        // Determine Y and cut to 2 decimals
        y = -(Math.cos(rad) * r).toFixed(2),
        // The another half ring. Same as (deg > 180) ? 1 : 0
        lenghty = window.Number(degrees > 180),
        // Moveto + Arcto
        descriptions = ['M', 0, 0, 'v', -r, 'A', r, r, 1, lenghty, 1, x, y, 'z'];
    // Apply changes to the path
    ring.setAttribute('d', descriptions.join(' '));
    // Update the numeric display
    text.textContent = range;
    range++;
    if(range > 100) {
        clearInterval(timer);
    }
}

  // Translate the center axis to a half of total size
  ring.setAttribute('transform', 'translate(' + r + ', ' + r + ')');

 var timer = setInterval(draw,100);

}(this));

基本上将range更改为一个从0开始的简单变量，并在每次调用draw()时增加其值。在这种情况下，创建一个间隔（命名为timer）以每0.1秒运行一次（当然，这取决于您），并在适当时从draw()清除该间隔...

关于javascript - 如何使用JS将计时器绑定(bind)到进度环？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18831598/