加载条
一般来说,加载条就是可以让用户看到目前的加载情况,最重要的是知道当前状态所需要加载的总量,以及目前加载的量。
在网页加载的过程中,可以让某样东西在加载之后完成一个回调,使加载的总数+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
- 欢迎点赞评论哦