每次我将变量分配给 javascript 中的不同值时，如何将变量传递给 function

Question

我正在尝试制作自己的简单圆形进度条以了解 arrays 和更多功能。

我用谷歌搜索了一些问题，但找不到我需要的东西。

到目前为止一切正常，除了一件事。

skillPercent fill()采用第一个给定的技能百分比并将其应用于所有数组元素。

我怎样才能让它根据给定的skillPercent改变每个元素。

 var d = document.querySelectorAll(".divb"); var i = d.length; while (i--) { if (d[i].className.includes("1")) { skillPercent = 40; fill(d[i]); } if (d[i].className.includes("2")) { skillPercent = 70; fill(d[i]); } if (d[i].className.includes("3")) { skillPercent = 90; fill(d[i]); } function fill(item) { percent = 1; setInterval(() => { if (percent == skillPercent) { clearInterval(item); } else { percent += 0.5; item.style.background = "conic-gradient( #ff5555 " + percent + "%, #000 0%)"; } }, 30); } }

 body { display: inline-flex; }.div { width: 130px; height: 130px; border-radius: 50%; display: flex; color: #fff; justify-content: center; align-items: center; margin: 1px; background: #555; }.divb { width: 150px; height: 150px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 1px; background-color: #000; /* background: conic-gradient(#00ff00 30deg, #000 0deg); */ }

 <div class="divb 1"> <div class="div">skill1</div> </div> <div class="divb 2"> <div class="div">skill2</div> </div> <div class="divb 3"> <div class="div">skill3</div> </div>

Answer 1

您需要首先使用 const、var 或 let 正确定义变量。

您可以将 SkillPercent 变量传递到 function 中，因此正如 Konrad Linkowski 所说，这使得每个 div 的 SkillPercent 都是唯一的

然后将间隔分配为变量，以便以后清除它。 最后，我稍微调整了您的代码，以便它重新加载每一帧，而不是以帧速率使用 setInterval 的稍微“hacky”的方式（但如果您也想要这样的话，我会在评论中留下）。

var d = document.querySelectorAll(".divb");
var i = d.length;

while (i--) {
  if (d[i].className.includes("1")) {
    const skillPercent = 40;
    fill(d[i], skillPercent);
  }

  if (d[i].className.includes("2")) {
    const skillPercent = 70;
    fill(d[i], skillPercent);
  }

  if (d[i].className.includes("3")) {
    const skillPercent = 90;
    fill(d[i], skillPercent);
  }

  function fill(item, skillPercent) {
    var percent = 1;
    // Perhaps you should use request animation instead of setInterval

    // Request animation frame
    // Whenever requestAnimationFrame is called, the code inside is executed on the next frame loaded. 
    // It was made so that different refresh rates doesn't impact the code as much.
    requestAnimationFrame(nextFrame)
    function nextFrame() {
        if (percent == skillPercent) {
            return // return will mean this function is not called again, thus stopping the animation
        } else {
            percent += 0.5;
            item.style.background = "conic-gradient( #ff5555 " + percent + "%, #000 0%)";
        }
        requestAnimationFrame(nextFrame) // Executes again in the next frame
    }
    // Request animation frame
    

    // Set interval 
    /*
    const myInterval = setInterval(() => {
      if (percent == skillPercent) {
        clearInterval(myInterval);
      } else {
        percent += 0.5;
        item.style.background = "conic-gradient( #ff5555 " + percent + "%, #000 0%)";
      }
    }, 30);*/
    // Set interval
  }
}

Answer 2

感谢 Danny Yuan，我发现我只需要做两件事：

在 function 中声明百分比。
通过技能百分比在 function。

而已。

 var d = document.querySelectorAll(".divb"); var i = d.length; while (i--) { if (d[i].className.includes("1")) { skillPercent = 40; fill(d[i], skillPercent); } if (d[i].className.includes("2")) { skillPercent = 70; fill(d[i], skillPercent); } if (d[i].className.includes("3")) { skillPercent = 90; fill(d[i], skillPercent); } function fill(item, skillPercent) { var percent = 1; setInterval(() => { if (percent == skillPercent) { clearInterval(); } else { percent++; item.style.background = "conic-gradient( #ff5555 " + percent + "%, #000 0%)"; } }, 10); } }

 .body { display: inline-flex; }.div { width: 130px; height: 130px; border-radius: 50%; display: flex; color: #fff; justify-content: center; align-items: center; margin: 1px; background: #555; }.divb { width: 150px; height: 150px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 1px; background-color: #000; }

 <body class="body"> <div class="divb 1"> <div class="div">skill1</div> </div> <div class="divb 2"> <div class="div">skill2</div> </div> <div class="divb 3"> <div class="div">skill3</div> </div> </body> </html>

每次我将变量分配给 javascript 中的不同值时，如何将变量传递给 function

问题描述

2 个解决方案

解决方案1
1 2022-08-20 17:01:15

解决方案2
0 2022-08-21 09:22:59

每次我将变量分配给 javascript 中的不同值时，如何将变量传递给 function

问题描述

2 个解决方案

解决方案1 1 2022-08-20 17:01:15

解决方案2 0 2022-08-21 09:22:59

解决方案1
1 2022-08-20 17:01:15

解决方案2
0 2022-08-21 09:22:59