如何创建一个进度条，它将改变颜色每隔20%和时间间隔(毫秒)，直到它被填满？

Question

我想创建一个进度条，用户将在其中输入间隔。在每个间隔和20%的进度中，条形图的颜色应该改变。

例如:用户输入100，然后每隔100毫秒，条形图将前进20%，其颜色将发生变化，如从蓝色开始，然后是绿色、黄色、橙色，最后是红色

我去了W3学校，发现了一些类似的东西，但它不是在bootstrap中完成的，我也想使用jQuery而不是JavaScript，但我真的不知道如何开始，所以我没有附加任何JavaScript或jQuery代码，因为它是空白的:(

  <form class="form">
    <label for="start" class="mr-3 ml-3">Start Temperature (Celcius) :</label>
    <input class="form-control mr-2 ml-3" type="number" id="start" />
    <label for="end" class="mr-3 ml-3">End Temperature (Celcius) :</label>
    <input class="form-control mr-2 ml-3" type="number" id="end" />
    <label for="interval" class="mr-3 ml-3">Interval (ms):</label>
    <input class="form-control mr-2 ml-3" type="number" id="interval" />

    <button id="click" class="btn btn-danger ml-3 mt-3" type="button" onclick="move()">Start</button>
  </form>

  <div class="row">
    <div class="text-right col-2 mt-3">
      <p>Start</p>
    </div>
    <div class="col-8">
      <div id="progress" class="progress mt-3 ">
        <div id="bar" class="progress-bar"></div>
      </div>
    </div>
    <div class="col-2 mt-3">
      <p>End</p>
    </div>
  </div>
</div>

谢谢

Answer 1

HTML

<input type="number" id="interval" placeholder="Enter Interval e.g (200)"/>
<button class="startBtn">
    start
</button>
<div class="container">
    <div class="bar">
        <div class="bar-progress"></div>
    </div>
</div>

CSS

.container{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 50px;
}
.bar{
  width: 100%;
  height: 30px;
  border: 1px solid #f7f7f7;
  border-radius: 20px;
  overflow:hidden;
}
.bar .bar-progress{
  width: 0;
  height: 100%;
  background: blue;
  display:flex;
  justify-content: center;
  align-items: center;
}

JS

let i = 1;
let interval;
let progress = $('.bar-progress');
$('.startBtn').on('click', function(){
   $('.bar-progress').css({
     'width': '0px'
   });
   interval = $('#interval').val();
   pause();
});
  pause = function() {
   i++;
   let bgColor = getRandomColor();
   $('.bar-progress').css({
     'width': (i * 20) + '%',
     'background': bgColor,
   })
   .html((i * 20) + '%');

   if (i == 5) {
     i = 1;
     return;
   }
   setTimeout(pause, interval);
 }
 function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

示例代码：https://jsfiddle.net/zyfrbad6/

Answer 2

创建颜色数组。

每次运行setTimeout时，增加变量i，增加进度条的宽度，并增加color_array的索引。一旦i达到5，就退出setTimeout函数。

​

$(function() {

  var color_array = [
    {col: 'blue'},
    {col: 'green'},
    {col: 'yellow'},
    {col: 'orange'},
    {col: 'red'}
  ];

  var int = 100;
  var col = -1;
  var bar = $('.bar-progress');
  var i = 0;

  timer = function() {
    i++;
    bar.css({
      'width': (i * 20) + '%',
      'background': color_array[i - 1]['col']
    });
    if (i == 5) {
      return;
    }
    setTimeout(timer, int);
  }

  timer();


});

.bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 20px;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.bar-progress {
  height: 100%;
  width: 0%;
  transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bar">
  <div class="bar-progress"></div>
</div>

​

Answer 3

创建超时函数，使用间隔值检查进度值，如果是20%，则添加背景颜色更改的类，如下所示：

setTimeout(function(){ 
    checkProgressBar();
 }, 3000);//use interval value


 function checkProgressBar(){
     //remove color classes added before

    // if progress bar value is 20% change color
    document.getElementById('progress-bar').classList.add('red');
    // if progress bar value is 40% change color
     document.getElementById('progress-bar').classList.add('green');
     //etc..
 }

.green{
  background: green;
}

.red{
  background: red;
}

<div id="progress-bar">