功能描述：顾名思义，既是形象地用柱状条长短变化表示进度变化过程的工具。如下图：
实现
- 组成：单看进度条的组成，外层是一个父标签，有一定长度，有边框，便于表现总的进度大小；里层是一个子标签，宽度为一定百分比的父标签宽度，并且背景色填充，有文本内容，文本居右，有一定内边距。
- 动画：为子标签设置一个轮询器，当宽度达到父标签宽度100%时，关闭轮询器，并做自定义操作
代码：
- HTML
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秒）后结束循环，循环时，实时改变子标签的宽度，并更改显示的文本内容。
时间： 2024-12-14 18:06:56