j使用时区/开始日期/结束日期查询进度条

jQuery progress bar with timezone/start date/end date

本文关键字：日期 查询 结束 开始 时区      更新时间：2023-09-26

我使用的是：

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%完成，以此类推

这是在建工地的进度条。因此，我们可以让访问者知道网站完成需要多长时间。

给你。让我们在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>

希望得到帮助。

相关文章：