Jun
26
2020
jQuery实现的简单百分比进度条效果示例
jQuery实现的简单百分比进度条效果示例，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现的简单百分比进度条效果示例</title>
</head>
<script type="text/javascript" src="http://www.phpernote.com/js/jquery.min.js"></script>
<script type="text/javascript">
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();
});
</script>
<body>
<div id="ProgressBarID">
<div>
</div>
</div>
</body>
</html>
微信扫一扫，打赏作者吧～
jQuery实现的简单百分比进度条效果示例：等您坐沙发呢！
发表评论
