JS动态进度条

JS动态进度条

下面我们使用Visual Studio这个软件来写一个JS的代码，我们可以用JS的代码写一个简单的方法，就是实现一个JS的动态进度条的效果。
那么这个代码要怎么写呢，首先我们需要先在界面上写一下的Html的代码，我们来看一下界面的代码是什么，看以下截图：

在截图中我们可以看到界面的代码就是，先用一个属性为H3的标签文字嵌套一个Loading…然后用一个div里面嵌套着一个div给他们都弄一个类为Kuang和JinDuTiao的名字，然后我们就需要去给他设置一下他的一些属性效果，接下来看一下属性代码的截图：

定义好界面的属性代码我们接着就需要写一下JS的代码。然后实现出动态进度条滚动的JS代码的内容，见截图：

我们通过第45行。先声明width等于0，然后声明一下timer，他这个没有等于0的意思就是声明变量为默认值，默认值就是undefined。然后setInterval的方法就是可以按照指定的周期来调用函数或者计算表达式。然后接着就是宽度每次+等于5，然后判断width>150的话就执行getElementsByClassName的方法让他返回文档中所有指定类名的元素集合，接着给他style属性颜色改为#cd4c49，然后接着也是一样判断他width大于350，当他达到350的时候就更改背景颜色，然后当width大于等于490的时候就不改变颜色了。直接+px。最后给他一个定时器时间的效果。接下来看一下他实现的结果：

这样就可以实现出动态滚动条的一个实现效果了。