Question

我需要一个与时间有关的进度...例如：如果我给出开始时间和结束时间，那么进度条就可以使用。

示例：

start_time = 3:30 pm
end_time = 4:10 pm
total_time = end_time - start_time

进度条应该完成total_time，并且总时间必须以分钟为单位。我试过这个plugin。

但它对我不起作用......

Answer 1

这是我给你的方向，它每分钟只更新一次，所以如果你没有看到进度条移动等待它:) Fiddle

HTML

  <div id="prbar"><span id="fill"></span>
  </div><span id="showleftmin"></span>

CSS

#prbar {
    width:100px;
    border:1px solid black;
    height: 10px;
}

#fill {
    width:0px;
    background: red;
    height: 10px;
    display:block;
}

的Javascript

var start = parseInt("2325", 0); //start time
var end = parseInt("2350", 0); //end time

var totalminutes = end - start;
var incrementer = 100/totalminutes;
var lengthprbar = 0;
var minutesleft = totalminutes;

var fill = document.getElementById('fill');

setInterval(function () {

    if (minutesleft === 0) {
        return;
    }

    lengthprbar += incrementer;

    fill.style.width = lengthprbar + 'px';

    document.getElementById('showleftmin').innerHTML = minutesleft - 1;

    minutesleft--;
}, 60000);

关于时间工作的Jquery进度条

1 个答案: