如何制作进度条？答案

【问题标题】：How do I make a progress bar?如何制作进度条？
【发布时间】：2020-08-21 04:36:00
【问题描述】：

我正在尝试为产品卡轨道创建一个进度条，因此通过用户点击上一个和下一个按钮（将向后或向前滚动），进度条将前进或备份。这是我想出的代码。问题是第一次单击没有显示任何结果，并且上一个按钮第一次像下一个按钮一样。就像代码落后了一步。我对 javaScript 很陌生，我不知道这是怎么发生的。

const productScroll = () => {

  rightButton.onclick = function () {
   
    let scrollLeft = document.querySelector('#ProductSlider').scrollLeft;
    let scrollPercent = ((scrollLeft - 0) / (5033 - 0)) * (100 - 0) + 0;
    document.querySelector('div.progress-bar').style.width = `${scrollPercent}%`;
    
  };

  leftButton.onclick = function () {

    let scrollLeft = document.querySelector('#ProductSlider').scrollLeft;
    let scrollPercent = ((scrollLeft - 0) / (5033 - 0)) * (100 - 0) + 0;
    document.querySelector('div.progress-bar').style.width = `${scrollPercent}%`;
  };

【问题讨论】：

分享更多代码来调试您的问题，包括 css 和 html。
不管怎样，a native progress bar element 可能满足您的要求。
几个问题：5033 来自哪里，为什么- 0 和你确定scrollLeft / 5033 介于0 和1 之间（所以最大scrollLeft 是5033） ?
首先谢谢您！公式是这样的： new_value = ( (old_value - old_min) / (old_max - old_min) ) * (new_max - new_min) + new_min 我知道我不必包括 0，但我只是想把公式放在一起，是的，最大 scrollLeft 为 5033。

标签： javascript

【解决方案1】：

如果您总是落后 1 步，则可能是您的百分比计算错误。例如，如果您有 5 个步骤并且想要显示每个步骤的进度，从 1 开始到 5 结束，那么您的进度条需要有 4 个步骤：

1 > 2 > 3 > 4 > 5 = 4 steps (total - 1)

5 步进度条的百分比如下所示：

1: 0%
2: 25%
3: 50%
4: 75%
5: 100%

注意每次增加是25% (1/4) 而不是20% (1/5)。

所以在抽象的形状中，你的计算需要是：

((scroll / max) * (steps - 1)) / (steps - 1) * 100%

这意味着你的scrollLeft / 5033需要在0到4之间，除以4，然后变成百分比：

const percentage = ((scrollLeft / 5033) * 4) / 4 * 100;

【讨论】：

谢谢，但也没有用。也许我以前不清楚这个问题。让我再试一次。当 scrollLeft 为 0 并且我第一次按下下一个按钮时，栏不会增加，但会发生滚动。当我第二次按下下一步时，栏会增加，但与第一步应该增加的一样多，依此类推。当我第一次按下 prev 按钮时，栏会增加而不是减少！当我第二次按下 prev 按钮时会减少。对不起，我的英语也不是很好。
滑块动画到新位置了吗？因为那么它可能使用了错误的scrollLeft 值
是的，实际上它正在动画到它的新位置。我还有另一个问题。视口大小更改时，最大 scrollLeft 会更改。代码很草率。你能推荐一种新的方法吗？
请添加相关的 HTML 代码（更好的是，创建一个小提琴或沙箱）并更新您的问题，以便我们进一步帮助您

【解决方案2】：

要创建进度条，首先创建两个名为 id Progress_Status 和 myprogressbar 的“div”标签元素。

要添加一个数字标签来指示用户在进程中的距离，进度条内部或外部的元素是必需的，它将显示进度状态，在这种情况下为myprogressbar。

<div id="Progress_Status"> 
  <div id="myprogressBar">1%</div> 
</div>

添加 CSS：

#Progress_Status { 
  width: 50%; 
  background-color: #ddd; 
} 
  
#myprogressBar { 
  width: 1%; 
  height: 35px; 
  background-color: #4CAF50; 
  text-align: center; 
  line-height: 32px; 
  color: black; 
}

添加 JavaScript：

接下来，下面的代码使用 JavaScript 函数 update 和 scene 创建一个动态进度条（动画）。

function update() { 
  var element = document.getElementById("myprogressBar");    
  var width = 1; 
  var identity = setInterval(scene, 10); 
  function scene() { 
    if (width >= 100) { 
      clearInterval(identity); 
    } else { 
      width++;  
      element.style.width = width + '%';  
      element.innerHTML = width * 1  + '%'; 
    } 
  } 
}

首先，您通过 id 获取元素，然后将起始宽度设置为 1。出于工作示例的目的，我使用 setintervel 来显示进度条的进度。

我们在这里所做的只是调用场景函数来检查宽度是否小于 100。如果是，则通过清除间隔来停止加载程序。如果没有，则增加宽度并将其添加到 with 和进度标签 div 中，以百分比显示进度。

完整代码：

function update() { 
  var element = document.getElementById("myprogressBar");    
  var width = 1; 
  var identity = setInterval(scene, 10); 
  function scene() { 
    if (width >= 100) { 
      clearInterval(identity); 
    } else { 
      width++;  
      element.style.width = width + '%';  
      element.innerHTML = width * 1  + '%'; 
    } 
  } 
}

#Progress_Status { 
  width: 50%; 
  background-color: #ddd; 
} 
  
#myprogressBar { 
  width: 1%; 
  height: 35px; 
  background-color: #4CAF50; 
  text-align: center; 
  line-height: 32px; 
  color: black; 
}

<!DOCTYPE html> 
<html> 

<body> 
  
<h3>Example of Progress Bar Using JavaScript</h3> 
  
<p>Download Status of a File:</p> 
  
<div id="Progress_Status"> 
  <div id="myprogressBar">1%</div> 
</div> 
  
<br> 
<button onclick="update()">Start Download</button>  

  
</body> 
</html>

【讨论】：