正文
JS网页顶部进度条demo
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面加载进度条</title>
<script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> var loadProcess = function (config) {
var count = 0;
var id = config.id;
var divTxt = "#"+id ;
$("body").prepend('<div id="' + id + '" style="width: 0%; height:5px; background: green; "></div>' ); /*更新进度条*/
this.updateProcess = function (percent) {
setTimeout(function () { $(divTxt).animate({ width: percent + "%" }) }, ++count * 500);
if (percent == 100) { /*100%就从页面移除loading标签*/
setTimeout(function () {
$(divTxt).hide(500);
setTimeout(function () { $(divTxt).remove() }, 500);
}, count * 500 + 800);
}
};
} </script> <style>
body{margin:0px;}
</style>
</head>
<body>
<div style="border:1px solid red;width:100%; height:100px;"> content.......</div>
</body><script type="text/javascript"> /*需要放在body标签后面，然后在适当的位置调用updateProcess方法*/
var p = new loadProcess({"id":"loading"});
p.updateProcess(30);
p.updateProcess(57);
p.updateProcess(60);
p.updateProcess(70);
p.updateProcess(80);
p.updateProcess(100);
</script></html>
