用setinterval()和clearinterval()来写进度条

用setinterval()和clearinterval()来写一个简单的进度条

首先需要明白两个方法的用法：

       setinterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式;不停地调用函数，直到 clearInterval() 被调用或窗口被关闭;需要返回一个参数，作为clearinterval()的参数来使用。

                            一般的形式就是两个参数，第一个参数是需要执行的函数，第二个参数是自己设置的毫秒数，1000毫秒=1秒，设置毫秒的意思就是多长时间再一次执行函数；

    clearinterval():取消由 setInterval() 设置的 timeout;参数必须是由 setInterval() 返回的 ID 值。

进度条的原理：简而言之，就是将一个设置了高度的div加上背景颜色，并且用函数让宽度不断增加，直到到最后停止执行函数。

具体见如下代码：

设置一个全局变量i，当函数执行一次时，i增加一次，宽度增加10%，直到i为10；如果继续增加，将会超出屏幕，增加滚动条，并不是我们想要的，这个时候就需要clearinterval()来清楚函数的执行了，将setinterval()返回给timerId(这个名字可以自己随便定义)，然后将返回的给clearinterval()当参数即可；（我设置的时1500毫秒执行一次，这个也是可以改变的）。