jQuery实现的简单百分比进度条效果示例,具体代码如下:
jQuery实现的简单百分比进度条效果示例var progressId = "ProgressBarID", time = 30;
function setProgressBar(progress) {
if (progress) {
$("#" + progressId + " > div").css("width", String(progress) + "%");
$("#" + progressId + " > div").html(String(progress) + "%");
}
}
var i_ProgressBar = 0;
function doProgressBarLoading() {
if (i_ProgressBar > 100) {
console.log("加载完毕");
return;
}
if (i_ProgressBar <= 100) {
setTimeout("doProgressBarLoading()", time);
setProgressBar(i_ProgressBar);
i_ProgressBar++;
}
}
function setProgressBarCss() {
$("#" + progressId + "").css({"width": "300px", "height": "25px"});
$("#" + progressId + " > div").css({"height": "25px", "background-color": "#f03", "text-align": "center"});
}
$(document).ready(function () {
setProgressBarCss();
doProgressBarLoading();
});