基于JQuery的进度条实现

Posted 新羽

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于JQuery的进度条实现相关的知识,希望对你有一定的参考价值。

功能描述:顾名思义,既是形象地用柱状条长短变化表示进度变化过程的工具。如下图:

实现

  • 组成:单看进度条的组成,外层是一个父标签,有一定长度,有边框,便于表现总的进度大小;里层是一个子标签,宽度为一定百分比的父标签宽度,并且背景色填充,有文本内容,文本居右,有一定内边距。
  • 动画:为子标签设置一个轮询器,当宽度达到父标签宽度100%时,关闭轮询器,并做自定义操作

代码:

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>我的进度条</title>
 6         <link rel="stylesheet" type="text/css" href="progress.css">
 7         <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
 8         <script type="text/javascript" src="progress.js"></script>
 9     </head>
10     <body>
11         <div class="flex-center">
12             <h3>系统加载中,请稍等...</h3>
13             <span class="container">
14                 <span id="progressBar" class="h-100P bar"></span>
15             </span>
16         </div>
17     </body>
18 </html>

引用自己写的CSS样式文件,再引入Jquery的Js文件,和自己写的JS文件。自己写的JS文件依赖于JQuery文件。

  • CSS
 1 .flex-center{
 2     display: flex;
 3     flex-direction: column;
 4     align-items: center;
 5 }
 6 .container{
 7         display: inline-block;
 8         width: 50%;
 9         height: 20px;
10         padding-right: 10px;
11         border: 1px solid #999;
12         border-radius: 5px; 
13 }
14 .h-100P{
15         height: 100%;
16 }
17 .bar{
18         display: inline-block;
19         background: #90bf46;
20         color: white;
21         font-weight: bold;
22         padding: 0 5px;
23         text-align: right;
24         border-radius: 5px;
25         border-right: 1px solid #999;
26 }

父标签引用container样式,子标签引用bar样式。

  • JS
 1 $(document).ready(function () {
 2     var percentage = 0;
 3     var interval = setInterval(function () {
 4         if (percentage < 10000) {
 5             percentage++;
 6             var widthTemp = (percentage / 100).toFixed(1) + \'%\';
 7             $(\'#progressBar\').css(\'width\', widthTemp);
 8             $(\'#progressBar\').text(widthTemp);
 9         } else {
10             clearInterval(interval);
11             $(\'h3\').text(\'加载完成!正在为您跳转...\');
12             setTimeout(function () {
13                 location = \'helloWorld.html\';
14             }, 1500);
15         }
16     }, 10);
17 });

$(document).ready()方法初始化JS文件,JS代码从这里开始执行。当percentage初始化为0,每10毫秒自加一次,自加10000次,既100000毫秒(100秒)后结束循环,循环时,实时改变子标签的宽度,并更改显示的文本内容。

以上是关于基于JQuery的进度条实现的主要内容,如果未能解决你的问题,请参考以下文章

使用jquery.form.js实现文件上传及进度条前端代码

用jquery实现进度条效果

活动到片段方法调用带有进度条的线程

jquery ajax实现上传文件代码,带进度条

jquery ajax实现上传文件代码,带进度条

基于Jquery的音乐播放器进度条插件