07-JS实现控制台简易进度条

JS实现控制台输出简易的进度条

代码效果如下

运行环境: vscode + node.js

控制台输出进度条的原理

1. 暂停效果实现

// 在js里面可以定义一个延时函数
//延时函数,ms为需要暂停的毫秒数
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
}

2. 不换行打印

//js里面的不换行打印为process.stdout.write()
process.stdout.write(message);

3. 光标移动到起始位置

//光标所在的行不变，列回到起始位置
process.stdout.write('\r');

4. 清空上一次的输出信息

 process.stdout.clearLine();

完整的代码如下:

/*
 * @Author: JIA 
 * @Date: 2022-10-17 22:05:26 
 * @Last Modified by: JIA
 * @Last Modified time: 2022-10-17 22:09:59
 */
// 运行环境 vscode + node.js
//延时函数
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
}
//需要拼接的字符串
let str0 = '当前进度: ';
let str02 = '';
let str03 = '';
let str04 = '';
//加一点动态性效果
let array = new Array('*','\\',  '|', '/', '-');
//主函数代码如下，使用匿名函数实现,await需要配合async使用
(async function () {
    //简单处理，进度条长度为100
    for (let index = 1; index <= 100; index++) {
        let str = `${index}${'%'} `;
        //更新进度条,计算百分比
        str03 = str0 + str02;
        str03 += '=> ';
        //不换行打印
        process.stdout.write(str03);
        process.stdout.write(' '.repeat(100 - index));
        process.stdout.write(str);
        //最后一次不需要打印动态信息标识符
        if(index != 100){
            process.stdout.write(array[index % array.length]);
        }
        //暂停200毫秒
        await sleep(200);
        if (index != 100) {
            //清空之前的输入内容
            process.stdout.clearLine();
            //光标移动到最前面
            process.stdout.write('\r');
            str02 += '=';
        } else {
            break;
        }
    }
})();