Maison > interface Web > js tutoriel > le corps du texte

Partager un exemple de code de la barre de progression de l'impression du terminal nodejs

零下一度
Libérer: 2017-04-25 10:44:47
original
1697 Les gens l'ont consulté

Cet article présente principalement l'exemple de code de barre de progression d'impression du terminal nodejs. L'éditeur pense qu'il est plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur pour y jeter un œil

1. Importation de scène

Lorsque nous traitons par lots un grand nombre de fichiers (par exemple : téléchargement/téléchargement, Sauvegarde, compilation, etc.), nous souhaitons souvent connaître la progression actuelle ou le nombre de tâches ayant échoué (réussies) lorsque notre code ou programme a été publié et que l'utilisateur effectue le processus d'installation, un moyen approprié (terminal/ligne de commande) ; progression La barre peut refléter avec précision les étapes et les processus de l'installation, améliorer la convivialité du programme et atténuer dans une certaine mesure les soucis de l'utilisateur en attendant...

Principes de base

Tout d'abord, il est plus facile d'imprimer du texte dans le terminal. Ensuite, en utilisant du texte et des symboles simples, vous pouvez reconstituer vous-même l'effet de la ligne de commande (exemple ci-dessous) :

Fichier téléchargé : 43,60 % ████████████████ ██████/ 150/344


Bien sûr, barre de progression Vous pouvez concevoir vous-même l'effet en fonction de vos besoins, je vous donne juste une référence ici.

Ici, je construis la méthode d'impression de la ligne de commande dans un module d'outil

, et l'implémentation spécifique est la suivante :-) 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 += &#39;█&#39;;
  }
  // 拼接灰色条
  var empty = &#39;&#39;;
  for (var i=0;i<this.length-cell_num;i++) {
   empty += &#39;░&#39;;
  }
  // 拼接最终文本
  var cmdText = this.description + &#39;: &#39; + (100*percent).toFixed(2) + &#39;% &#39; + cell + empty + &#39; &#39; + opts.completed + &#39;/&#39; + opts.total;
  // 在单行输出文本
  slog(cmdText);
 };
}
// 模块导出
module.exports = ProgressBar;
Copier après la connexion

3. Exécutez

Sur la base de l'implémentation ci-dessus, parlons d'abord de l'utilisation de ce <🎜 :

progress-bar.js


Exécutez le code ci-dessus, l'effet d'exécution est le suivant :
// 引入工具模块
var ProgressBar = require(&#39;./progress_bar&#39;);
// 初始化一个进度条长度为 50 的 ProgressBar 实例
var pb = new ProgressBar(&#39;下载进度&#39;, 50);
// 这里只是一个 pb 的使用示例,不包含任何功能
var num = 0, total = 200;
function downloading() {
 if (num <= total) {
  // 更新进度条
  pb.render({ completed: num, total: total });
  num++;
  setTimeout(function (){
   downloading();
  }, 500)
 }
}
downloading();
Copier après la connexion

Les étudiants qui ont besoin d'apprendre js doivent faire attention au site Web chinois php

js tutoriel vidéo

, de nombreux tutoriels vidéo js en ligne C'est gratuit à regarder !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal