Question

我正在使用bootstrap的进度条来显示实时计时器。这背后的想法只是显示你在一个项目上工作了多少小时和几分钟。

到目前为止，我工作的是每分钟更新的实时计数器。如果你在这个项目上工作超过6个小时，它会在8小时后变成黄色和红色。

我无法弄明白的是如何让进度条逐步增加到100％？例如，一旦达到8小时，它应该达到100％。

这是迄今为止我能够完成的一个例子。 https://jsfiddle.net/DTcHh/18405/

var update = function () {
  $.each($(".timer_cell"), function () {
    var start_time = $(this).closest('tr').find('.start_time').html();
    var live_timer_div = $(this).find(".live_timer_div");

    function updateDuration(startTime, endTime) {
      var ms = moment(endTime, 'YYYY/MM/DD HH:mm').diff(moment(startTime, 'YYYY/MM/DD HH:mm')),
      dt = moment.duration(ms),
      h = Math.floor(dt.asHours()),
      m = moment.utc(ms).format('mm');
      live_timer_div.html(h + ' hours, ' + m + ' minutes');

      if (h >= 8) {
      live_timer_div.removeClass("progress-bar-success progress-bar-warning");
      live_timer_div.addClass("progress-bar-danger");
      }
      else if (h >= 6){
      live_timer_div.removeClass("progress-bar-success progress-bar-danger");
      live_timer_div.addClass("progress-bar-warning");
      }

    };

    updateDuration(start_time, moment().format('YYYY-MM-DD HH:mm'));  
  });
};

$(document).ready(function(){
update();
setInterval(update, 61000);
});

Answer 1

var progressBarPercentage = (h * 60 + Number(m)) * percentageIncrement;确定为每个progressbar设置的百分比。 percentageIncrement为100/480 (0.208%)，表示每分钟增加的百分比数量。

最后，live_timer_div.css("width", progressBarPercentage + "%");为每个width设置了所需的progressbar。

<强> Fiddle Demo

var percentageIncrement = 100 / 480; //480 minutes in 8 hours. 100 / 480 = the amount to increase the percentage bar per minute
var progressBarPercentage;

var update = function() {
    console.log("UPDATE");
  $.each($(".timer_cell"), function() {
    var start_time = $(this).closest('tr').find('.start_time').html();
    var live_timer_div = $(this).find(".live_timer_div");

    function updateDuration(startTime, endTime) {
      var ms = moment(endTime, 'YYYY/MM/DD HH:mm').diff(moment(startTime, 'YYYY/MM/DD HH:mm')),
        dt = moment.duration(ms),
        h = Math.floor(dt.asHours()),
        m = moment.utc(ms).format('mm');
      live_timer_div.html(h + ' hours, ' + m + ' minutes');

      progressBarPercentage = (h * 60 + Number(m)) * percentageIncrement;

      live_timer_div.css("width", progressBarPercentage + "%");

      if (h >= 8) {
        live_timer_div.removeClass("progress-bar-success progress-bar-warning");
        live_timer_div.addClass("progress-bar-danger");
      } else if (h >= 6) {
        live_timer_div.removeClass("progress-bar-success progress-bar-danger");
        live_timer_div.addClass("progress-bar-warning");
      }

    };

    updateDuration(start_time, moment().format('YYYY-MM-DD HH:mm'));
  });
};

$(document).ready(function() {
  update();
  setInterval(update, 61000);
});

Answer 2

添加：

  var max = 8*60*60*1000;
  var pos = ms/max * 100;
  if (pos > 100) pos = 100;
  live_timer_div.css("width", pos + "%")

因为进度的大小是基于％年龄，所以您需要一个简单的计算来转换实际与最大转换为％年龄。

在你的小提琴中，大多数都超过100％，所以我添加了一个检查，但实际上你可能喜欢一个堆叠的条形，3个绿色/黄色/红色，绿色，8小时，50％吧，显示＆gt; 8小时非常清楚

或者您可以在上面的代码中将8（小时）更改为例如16（小时），但可能会令人困惑。

小提琴：https://jsfiddle.net/DTcHh/18407/

使用Bootstrap的进度条作为倒计时器

2 个答案: