ブートストラップの進捗バーをカウントダウンタイマーとして使用する

Question

ライブタイムカウンタを表示するために、ブートストラップの進捗バーを使用しています。この背後にあるアイデアは、単にあなたがプロジェクトに取り組んでいた時間と分を表示するだけです。

今まで私が働いていたのは、毎分更新されるライブカウンターです。このプロジェクトで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%)であり、1分ごとに増加する割合を表します。

最後に、live_timer_div.css("width", progressBarPercentage + "%");は、それぞれprogressbarに必要なwidthを設定します。

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つの部分が50 8時間をかなり鮮明に表示するバーの割合

または、上記のコードで8時間（たとえば、16時間）に変更するだけで、混乱する可能性があります。

フィドル：https://jsfiddle.net/DTcHh/18407/