您的位置：首页 > Web前端 > JavaScript

JS网页顶部进度条demo

2016-02-28 17:53 671 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航