2021-07-08 进度条的实现

实现效果

思路

在定时器中,将每个li的文本’_’,逐渐替换成’#’

代码

html

<div id="box">
    <ul>
        <li>_</li>
        <!-- 10个li -->
        <li>_</li>
    </ul>
</div>

css

ul,li {list-style-type: none;display: flex;}

js

var li = document.querySelectorAll("li");
var i = 0;
setInterval(() => {
    li[i].innerHTML = '#';
    i++;
}, 1000);

优化1:样式优化

1.优化html结构和css样式
2.li节点改成动态创建
3.设置清除定时器并弹窗提醒完成

html

<div id="box">
    <span>下载中:</span>
    <ul>
        <!-- <li>_</li> -->
    </ul>
    <span>已完成</span>
    <span>0</span>
    <span>%</span>
</div>

css

#box {width: 600px;height: 100px;margin: 30px auto;border: solid;}
ul,li {margin: 3px auto;list-style-type: none;display: flex;}

js

var ul = document.querySelector("ul");
var span = document.querySelectorAll("span");
for (var i = 0; i < 50; i++) {
    var li = document.createElement("li");
    li.innerHTML = '_';
    ul.appendChild(li);
}
var li = document.querySelectorAll("li");
var t=100;
var i = 0;
var timer = setInterval(() => {
    if (i == li.length) {
        clearInterval(timer);
        alert('下载完成!');
    } else {
        li[i].innerHTML = '#';
        span[2].innerHTML = (i + 1) * 100 / li.length;
        i++;
    }
}, t);

优化2:定时器时间设置为随机

难点:定时器的t在其每个执行周期内是随机的

js

var i = 0;
var li = document.querySelectorAll("li");
var timer1 = setInterval(() => {
    var t = getNum(100, 10000);
    var timer2 = setInterval(() => {
        // console.log(t);
        if (i >= li.length) {
            alert('下载完成!');
            clearInterval(timer1);
            clearInterval(timer2);
        } else {
            li[i].innerHTML = '#';
            span[2].innerHTML = (i + 1) * 100 / li.length;
            i++;
        }
    }, t);
}, 1000);

效果