时间戳

首页 > 解决方案 > 如何创建一个进度条，它会在每 20% 和时间间隔（毫秒）内改变颜色，直到它被填满？

javascript - 如何创建一个进度条，它会在每 20% 和时间间隔（毫秒）内改变颜色，直到它被填满？

问题描述

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

例如：用户输入 100，然后每 100 毫秒后，进度条会前进 20% 并且颜色会发生变化，例如从蓝色开始，然后是绿色、黄色、橙色，最后是红色

我去了 W3 学校，发现了类似的东西，但它没有在引导程序中完成，我也想使用 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>

谢谢

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

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/

推荐阅读