【小东西】 字符串形式的加载条

加载条

一般来说，加载条就是可以让用户看到目前的加载情况，最重要的是知道当前状态所需要加载的总量，以及目前加载的量。
在网页加载的过程中，可以让某样东西在加载之后完成一个回调，使加载的总数+1。直到所有的东西都加载完毕（100%）

这小段代码的目的

输入0-1之间的数字（加载情况），并且输入所需要的加载条的最高字数，返回一个字符串形式的加载条

let logProgress = (progress, maxBlock, fill = '■', blank = '□') => {
    const fillNumber = Math.floor(progress*maxBlock);// 已经加载的方块个数
    const blankNumber = maxBlock - fillNumber;// 还未加载的方块个数
    let fillArr = []; // 所有已加载的方块
    for (let i = 0; i < fillNumber; i++) {
        fillArr.push(fill);
    }
    let blankArr = [];// 所有未加载的方块
    for (let j = 0; j < blankNumber; j++) {
        blankArr.push(blank);
    }
    let textArr = fillArr.concat(blankArr);// 将已加载的和未加载的两个方块数组连接起来
    let text = textArr.join('');// 将数组变为字符串
    console.log('%c'+text+'已加载'+Math.round(progress*100)+'%','color:green;font-size:15px;');
    return text; // 返回
};

使用

使用就非常简单了，第一个参数与第二个参数是必须的，后面已加载与还未加载的显示字符是可选项
比如：

logProgress(0.5,20);

在控制台的显示是这样的：

尝试一下不同的加载字符：

logProgress(0.3,10,'※','×')

表现如下：

• 这里是角角兔 towrabbit
• 欢迎点赞评论哦