JS网页顶部进度条demo
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于JS网页顶部进度条demo的主要内容，如果未能解决你的问题，请参考以下文章