为什么获胜'这个半圆长不大

Why won't this semi circle grow?

本文关键字：半圆 长不大 获胜 为什么      更新时间：2023-09-26

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

我想在目标框（0-100）中为circle1的新半径输入一个值。我设定了100毫秒的间隔，在半径约为1的1%的步长内显示它在生长，但似乎不起作用。我不太擅长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)
        }
    }
});

编辑：纠正了重大错误。将半径0更改为半径1。需要更多的咖啡。

您的函数必须使用setInterval，而且您的条件不正确。处理这个JsFiddle

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

首先，要增加较大半圆radius0的半径。您希望增加radius1并将其应用于circle1。

第二件事是setTimeout()将只调用该函数一次。您需要使用setInterval()每100ms调用一次函数。但是，由于您不希望它在半径达到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/

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

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

if条件永远不满足。

相关文章：