用setinterval()和clearinterval()来写一个简单的进度条
首先需要明白两个方法的用法:
setinterval():按照指定的周期(以毫秒计)来调用函数或计算表达式;不停地调用函数,直到 clearInterval() 被调用或窗口被关闭;需要返回一个参数,作为clearinterval()的参数来使用。
一般的形式就是两个参数,第一个参数是需要执行的函数,第二个参数是自己设置的毫秒数,1000毫秒=1秒,设置毫秒的意思就是多长时间再一次执行函数;
clearinterval():取消由 setInterval() 设置的 timeout;参数必须是由 setInterval() 返回的 ID 值。
进度条的原理:简而言之,就是将一个设置了高度的div加上背景颜色,并且用函数让宽度不断增加,直到到最后停止执行函数。
具体见如下代码:
设置一个全局变量i,当函数执行一次时,i增加一次,宽度增加10%,直到i为10;如果继续增加,将会超出屏幕,增加滚动条,并不是我们想要的,这个时候就需要clearinterval()来清楚函数的执行了,将setinterval()返回给timerId(这个名字可以自己随便定义),然后将返回的给clearinterval()当参数即可;(我设置的时1500毫秒执行一次,这个也是可以改变的)。