利用JS实现动态进度条效果

效果：实现一个每隔一秒进度增加1%，到100%停止的进度条，不同的进度改变进度条的颜色。

一、利用HTML+CSS进行页面布局

注意：1.将进度条变化区域宽度（width）设置为0，再设置一个背景颜色；

   2.将移动的进度飞机与显示的百分比设置为相对定位（position：absolute；）。

二、利用JS实现具体功能

1.使用计时器setInterval（function（）{}，1000）让进度条在设置时间增加设置的进度（每计时一次，将进度条的宽度增加1%）；

2.设置限定条件，当进度条的宽度为多少时，改变进度条的背景颜色（element.style.background=red）;动态增加移动飞机和显示数据框，让它们跟着计时器一起动起来；

3.进度到达100%关闭计时器（clearInterval()；）；

三、效果图

四、代码实现