圆形进度条上的增量更平滑答案

【问题标题】：Smoother increments on circular progress bar圆形进度条上的增量更平滑
【发布时间】：2022-07-22 01:39:55
【问题描述】：

我在 PLC 上运行的 HTML 页面上创建了一个循环进度条。我希望通过增加完成 HTML 画布弧所需的增量来使动画更流畅。

从 PLC 读取的变量每秒递增 0.27。我的目标是让我的进度条在每次从我的 PLC 读取之间执行 10 个 0.027 的增量，以使进度条动画看起来更流畅。目前我只是将此值视为一个数字，一旦我得到 0.027 部分的 10 个增量，我将对我的代码的弧部分进行排序。

使用该代码，我目前的数字跳跃很多。

var cratio = ((v2.nodeValue/360)*100);

for (var i = 0; i < 10; i++) {
    
setInterval(function () {
var cratio2 = (cratio + 0.027);     
var cratio3 = cratio2.toFixed(2);
    document.getElementById("cycleratio").innerHTML = cratio3 + "%";
 cratio = cratio3;  
}, 10); 

}

我在另一个 setInterval 循环中拥有上述代码的全部内容，该循环每 100 毫秒运行一次函数，然后您可以看到我每 10 毫秒通过此函数递增。

我认为它不起作用，因为我没有重置 i 变量，并且我在 0.027 的所有 10 个增量完成之前重新定义 cratio，但我已经尝试了几个小时来解决这个问题，但一无所获。

如果有任何帮助，我将不胜感激。谢谢：p

【问题讨论】：

标签： javascript html plc

【解决方案1】：

根据你的解决方法，我不太确定我是否理解你在做什么，但如果你想每 100 毫秒增加一个数字，它会为你工作。

var cratio = ((v2.nodeValue/360)*100);
const interval = setInterval(() => {
  cratio += 0.027
  document.getElementById("cycleratio").innerHTML = cratio.toFixed(2) + "%";
  if (cratio >= 100) //or any number which is your max
  clearInterval(interval)
}, 100)

【讨论】：