sublime_text网页编辑器
首先先说一下DIV代码，这个地方有一个需要注意的地方，就是进度条初始化的宽度是0，这个样式必须写在标签内部，也就是内嵌形式 style='width:0%'或者 style='width:0px',写在ID样式中是无效的，因为ID样式会被调用，是动态变化的。DIV代码如下所示：
新建样式后，打开浏览器，发现无法显示进度条进度，如下图所示。所以我们要采用内嵌形式形式的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%后并没有增加，表明程序没有错误。
共同分享，共同进步。