Question

基本上，我有两个半圈。一个（circle0）具有恒定的半径，内半圆（circle1，具有梯度）具有可变半径。 circle1的初始值为circle0的1％半径。

我想在目标框（0-100）中为circle1的新半径输入一个值。我在circle1半径1％的步长上设置了100ms的间隔，以显示它在增长，但似乎不起作用。我不是很擅长javascript / jquery但是非常感谢任何帮助。

在此处查看演示：https://jsfiddle.net/nilerafter24/ma845o6d/3/

这是我的javascript：

$(document).ready(function() {
    function circle_set(delta) {
        if (!delta) {
            return false;
        } else {
            var e = document.querySelectorAll('circle[id^=circle]');
            var radius0 = parseInt(e[0].getAttribute('r'), 10);
            var radius1 = parseInt(e[1].getAttribute('r'), 10);
            var currentRadius = (delta / 100) * 50;

            if (currentRadius <= radius0) {

                setTimeout(function() {
                    if (radius1 <= currentRadius) {
                        radius1++;
                        e[1].setAttribute('r', String(radius0) + "%");
                    },
                }, 100);
            }
        }
    }

    var inputTargetButton = document.getElementById('executeTarget');
    var inputTargetValue = document.getElementById('setTarget');

    if (inputTargetButton.type == 'button') {
        inputTargetButton.onclick = function() {
            circle_set(inputTargetValue.value)
        }
    }
});

修改纠正了大错误。将radius0更改为radius1。需要更多咖啡。

Answer 1

你必须为你的函数使用setInterval，你的条件也是不正确的。这个JsFiddle

setInterval(function() {
    if (radius1 <= currentRadius) {
        radius1++;
        e[1].setAttribute('r', String(radius1) + "%");
    }
}, 100);

Answer 2

首先，你所拥有的是增加更大的半圆的半径radius0。您希望增加radius1并将其应用于circle1。

第二件事是setTimeout()只会调用一次函数。您需要使用setInterval()每100毫秒调用一次该函数。但是，由于您不希望它在半径达到currentRadius后继续调用，因此您应该使用clearInterval()清除它：

if (currentRadius <= radius0) {
    var timer = setInterval(function() {
        if (radius1 <= currentRadius) {
            radius1++;                   
            e[1].setAttribute('r', String(radius1) + "%");
        }
        else {
            clearInterval(timer);
        }
    }, 100);
}

看看这个工作小提琴：https://jsfiddle.net/q4ns6q0m/1/

Answer 3

根据我的测试，在此代码中：

if (radius0 <= currentRadius) {
   radius0++;
   e[1].setAttribute('r', String(radius0) + "%");
  }, 
}

if条件永远不会满足。

为什么这个半圈不会成长？

3 个答案: