JavaScript 进度条加载

使用JavaScript实现一个进度条从0加载到100的过程。

使用progress

H5中新增了标签progress ，表示一个进度条，value：当前值，min：最小值，max：最大值

代码

HTML代码如下：

 <progress id="progress" value="0" min="0" max="100"></progress><label id="progress-label"></label>

JavaScript代码如下：

 // 实现一个进度条从0 到100加载
        var progress = document.getElementById("progress");
        var label = document.getElementById("progress-label");
        for (var i = 0; i <= 100; i++) {
            (function (i) {
                setTimeout(function () {
                    progress.value=i;
                    label.innerText = i;
                }, i * 1000)
            })(i)
        }

思路

• 使用标签progress，progress是HTML5新增的标签，是一个进度条。
• 使用setTimeout方法，每秒修改一次progress的值。
• setTimeout是一个异步的宏任务，会在所有同步代码执行完毕后再执行。同时使用var声明的变量i在for循环外部仍可以访问，setTimeout真正执行的时候，i的值始终是100。
• 将setTimeout包裹在一个立即执行函数中，setTimeout的作用域是这个立即执行函数 并将当前的变量i的值传入。

使用let

使用let声明一个变量之后，仅在声明时所在的作用域内有效。每次for循环就创建一个作用域，而因为let声明的原因，每个作用域间的变量 是独立的互不影响的。
代码如下：

 var progress = document.getElementById("progress");
 var label = document.getElementById("progress-label");
 for(let i=0;i<=100;i++){
            setTimeout(function(){
                progress.value=i;
                label.innerText=i;
            },i*1000)
        }