Javascript 如何使用JS将计时器绑定到进程环？

我在玩一个进度环，我似乎无法让它在计时器上运行。我正在尝试让进度环自动传播，并用0.5秒的时间从0%变为我在本例中设置的65%的任何百分比

我用这个进步环作为基础：

这是我的小提琴：

我尝试使用计时器功能，但我可能没有正确地集成它。在小提琴中，我补充道：

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

---

然而，这打破了进度环。我认为只要范围更新为+=I，就会调用draw函数。我做错了什么？提前非常感谢。

我想您想要的是：

function inc() {
    var val = parseInt(range.value, 10)
    range.value = val + 1;
    draw(); // updating the value doesn't cause `onchange`.
    if (val < 100) { // don't go over 100
        setTimeout(inc, 100);
    }
}
inc();

---

如果您不打算使用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));

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

---

非常感谢。我忘了更新我删除输入的小提琴。你知道计时器是否也可以在三次贝塞尔上设置吗？@AtalayaCavallo不客气，是的，它也应该是可能的，计时器和使圆工作在一起但不相关的函数，所以你可以用不同的图形/曲线/任何东西创建东西，只要你使用正确的数学代码。。。