带有时区/开始日期/结束日期的 jQuery 进度条

Question

我正在使用这个：

var start = new Date();
var maxTime = 835000;
var timeoutVal = Math.floor(maxTime/100);
animateUpdate();

function updateProgress(percentage) {
    $('#pbar_innerdiv').css("width", percentage + "%");
    $('#pbar_innertext').text(percentage + "%");
}

function animateUpdate() {
    var now = new Date();
    var timeDiff = now.getTime() - start.getTime();
    var perc = Math.round((timeDiff/maxTime)*100);
      if (perc <= 100) {
       updateProgress(perc);
       setTimeout(animateUpdate, timeoutVal);
      }
}

https://jsfiddle.net/6h74c/3/

而且它有效。但它仅在您加载页面并开始计算maxTime（以毫秒为单位）时有效。这是没用的。我需要设置开始日期和结束日期，例如3 天 5 小时（包括时区和输入日期时，还需要包括小时）。因此，如果用户在 2 天内访问，他已经看到进度条完成了约 70%，依此类推。

这是一个正在建设的网站的进度条。这样我们就可以让访问者知道该网站需要多长时间才能完成。

Answer 1

给你。让我们从 UTC 时区开始。

// year,month,day,hours,minutes,seconds,millisec
// set to recent UTC time in past.
var start = new Date(Date.UTC(2015, 6, 4, 7, 23, 0, 0));
var maxTime = 835000;
var timeoutVal = Math.floor(maxTime / 100);
animateUpdate();

function updateProgress(percentage) {
  $('#pbar_innerdiv').css("width", percentage + "%");
  $('#pbar_innertext').text(percentage + "%");
}

function animateUpdate() {
  var now = new Date();
  var timeDiff = now.getTime() - start.getTime();
  var perc = Math.round((timeDiff / maxTime) * 100);
  console.log(perc);
  if (perc <= 100) {
    updateProgress(perc);
    setTimeout(animateUpdate, timeoutVal);
  } else { // It got 100%
    updateProgress(100);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pbar_outerdiv" style="width: 300px; height: 20px; border: 1px solid grey; z-index: 1; position: relative; border-radius: 5px; -moz-border-radius: 5px;">
  <div id="pbar_innerdiv" style="background-color: lightblue; z-index: 2; height: 100%; width: 0%;"></div>
  <div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: black; font-weight: bold; text-align: center;">0%</div>
</div>

希望对您有所帮助。