1、首先先说一下DIV代码，这个地方有一个需要注意的地方，就是进度条初始化的宽度是0，这个样式必须写在标签内部，也就是内嵌形式style="width:0%"或者style="width:0px",写在ID样式中是无效的，因为ID样式会被调用，是动态变化的。DIV代码如下所示：<div class ="test"> <div id="progress" style="width:0%"></div> </div>
3、新建样式后，打开浏览器，发现无法显示进度条进度，如下图所示。所以我们要采用内嵌形式形式的CSS调用，确保能够被优先加载。
5、弄好DIV+CSS后，接下来我们来看JS，首先构造一个函数，这个函数的功能是动态的显示进度条的进度，以1%的速度递增。当进度条达到100%的时候停止递增，清除递增功能，红框框住的是清除递增的功能。代码如下所示：function haha(){ var jindutiao = document.getElementById("progress"); jindutiao.style.width = parseInt(jindutiao.style.width) + 1 + "%"; jindutiao.innerHTML = jindutiao.style.width; if(jindutiao.style.width == "100%"){ window.clearInterval(shijian); } }
7、接下来我们用浏览器打开文档，我们会看到进度条随着时间的延长而不断增加进度，也就是绿色部分不断增加，下图是增加到43%时的效果。
9、最后我们来看一下进度达到100%的效果，如果程序没有错误，进度达到100%就会停止，如图所示，进度达到了100%后并没有增加，表明程序没有错误。
