1

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

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

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

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

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

然而，这打破了进度环。我认为只要更新范围（使用 += i），就会调用绘图函数。我究竟做错了什么？非常感谢你。

4

2 回答 2

0

我想你想要这样的东西：

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();
于 2013-09-16T15:26:22.093 回答
0

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

JSFiddle Demo

于 2013-09-16T15:35:31.223 回答