jQuery 进度条 timezone/start date/end 日期
jQuery progress bar with timezone/start date/end date
我正在使用这个:
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);
}
}
并且有效。但它仅在您加载页面并开始计算 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>
希望对您有所帮助。
我正在使用这个:
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);
}
}
并且有效。但它仅在您加载页面并开始计算 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>
希望对您有所帮助。