이 글은 주로 nodejs 터미널 인쇄 진행률 표시줄 예제 코드를 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 이를 여러분과 공유하고 참고용으로 제공하겠습니다. 편집기를 따라 살펴보겠습니다
1. 장면 가져오기
많은 수의 파일을 일괄 처리할 때(예: 업로드/다운로드, 저장, 컴파일 등), 코드나 프로그램이 출시되고 사용자가 적절한(터미널/명령줄) 설치 프로세스를 수행할 때 현재 진행 상황이나 실패한(성공한) 작업 수를 알고 싶어하는 경우가 많습니다. ) 진행 바는 설치 단계와 과정을 정확하게 반영하여 프로그램의 사용성을 향상시키고, 기다리는 동안 사용자의 걱정을 어느 정도 완화할 수 있습니다...
2. 기본 원칙
첫째, 터미널에서 텍스트를 인쇄하는 것이 더 쉽습니다. 그런 다음 간단한 텍스트와 기호를 사용하여 명령줄의 효과를 직접 조합할 수 있습니다(아래 예):
업로드된 파일: 43.60% ████████████████ ██████/ 150/344
물론 진행률 표시줄은 필요에 따라 직접 효과를 디자인할 수 있습니다. 여기서는 단지 참고 사항일 뿐입니다.
여기서 명령줄을 도구 모듈에 인쇄하는 방법을 구성 progress-bar.js
하고 구체적인 구현은 다음과 같습니다.-)
// 这里用到一个很实用的 npm 模块,用以在同一行打印文本 var slog = require('single-line-log').stdout; // 封装的 ProgressBar 工具 function ProgressBar(description, bar_length){ // 两个基本参数(属性) this.description = description || 'Progress'; // 命令行开头的文字信息 this.length = bar_length || 25; // 进度条的长度(单位:字符),默认设为 25 // 刷新进度条图案、文字的方法 this.render = function (opts){ var percent = (opts.completed / opts.total).toFixed(4); // 计算进度(子任务的 完成数 除以 总数) var cell_num = Math.floor(percent * this.length); // 计算需要多少个 █ 符号来拼凑图案 // 拼接黑色条 var cell = ''; for (var i=0;i<cell_num;i++) { cell += '█'; } // 拼接灰色条 var empty = ''; for (var i=0;i<this.length-cell_num;i++) { empty += '░'; } // 拼接最终文本 var cmdText = this.description + ': ' + (100*percent).toFixed(2) + '% ' + cell + empty + ' ' + opts.completed + '/' + opts.total; // 在单行输出文本 slog(cmdText); }; } // 模块导出 module.exports = ProgressBar;
3 . 실행
위 구현을 바탕으로 먼저 이 progress-bar.js
의 사용법에 대해 이야기해 보겠습니다.
// 引入工具模块 var ProgressBar = require('./progress_bar'); // 初始化一个进度条长度为 50 的 ProgressBar 实例 var pb = new ProgressBar('下载进度', 50); // 这里只是一个 pb 的使用示例,不包含任何功能 var num = 0, total = 200; function downloading() { if (num <= total) { // 更新进度条 pb.render({ completed: num, total: total }); num++; setTimeout(function (){ downloading(); }, 500) } } downloading();
위 코드를 실행하면 실행 효과는 다음과 같습니다.
js를 배워야 하는 학생은 php 중국어 사이트를 주목해주세요 js 영상 튜토리얼, 많은 js 온라인 비디오 튜토리얼을 무료로 시청할 수 있습니다!
위 내용은 nodejs 터미널에서 진행률 표시줄을 인쇄하는 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!