Simone如何用JS代码写进度条小程序
的有关信息介绍如下：
当我每每在后台更新网站的时候总是显示更新的进度的进度条，当时我就特别想做一做进度条，看看是什么原理，由于当时很忙，也没有做。现在有时间了，今天查了查资料终于把进度条弄出来了，顺便以经验的形式写出来了，希望对大家有所帮助。
首先先说一下DIV代码，这个地方有一个需要注意的地方，就是进度条初始化的宽度是0，这个样式必须写在标签内部，也就是内嵌形式style="width:0%"或者style="width:0px",写在ID样式中是无效的，因为ID样式会被调用，是动态变化的。DIV代码如下所示：
带着上述疑问我决定新建一个class样式，毕竟这也是编程人员想到的方法，当我新建之后，引用这个样式的时候，发现也是无效。
新建样式后，打开浏览器，发现无法显示进度条进度，如下图所示。所以我们要采用内嵌形式形式的CSS调用，确保能够被优先加载。
弄好DIV后，我们看一下CSS样式，进度条的进度颜色我用的是绿颜色，因为我在更新网站的时候总是见到绿色，绿色对我很有亲切感。CSS代码如下所示
弄好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);
}
}
接下来是定时功能，每0.1S执行一次进度功能，换句话说也就是10S中更新完毕，达到100%，当页面加载的时候开始执行。代码如下所示：
var shijian = window.setInterval(function(){haha();},100);
window.onload = function(){
shijian;
}
接下来我们用浏览器打开文档，我们会看到进度条随着时间的延长而不断增加进度，也就是绿色部分不断增加，下图是增加到43%时的效果。
下面我们看到的是进度达到82%时的效果。
最后我们来看一下进度达到100%的效果，如果程序没有错误，进度达到100%就会停止，如图所示，进度达到了100%后并没有增加，表明程序没有错误。
