在 JS/Jquery 中使用开始时间和结束时间动画进度条答案

【问题标题】：Animate Progress Bar with start time and end time in JS/Jquery在 JS/Jquery 中使用开始时间和结束时间动画进度条
【发布时间】：2020-02-21 04:43:27
【问题描述】：

我想用 js/jquery 为进度条制作动画。

我的开始时间是这样的：“2020-02-21 05:38:33”和结束时间：“2020-02-21 05:41:43”。我认为这可以用当前时间和开始和结束时间来计算。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我使用 Bootstrap、jQuery 和 momentjs 创建了一个示例进度条。希望这会帮助你。

$(document).ready(function(){
  var start = moment('2020-02-21 05:38:33');
  var end = moment('2020-02-21 20:00:00');
  var formattedPercentage = 0;
  
  var interval = setInterval(function(){
    var now = moment();
    var percentage = now.diff(start) / end.diff(start) * 100;

    if (percentage > 100) {
      formattedPercentage = 100;
      clearInterval(interval);
    } else {
      formattedPercentage = percentage.toFixed(2);
    }
    // Use formattedPercentage as you need
    $('#example-progress-bar .progress-bar').width(formattedPercentage+'%').html(formattedPercentage+'%')

  }, 500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>



<div id="example-progress-bar" class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

【讨论】：