日立の研究者が、2年間ドイツ人工知能研究センターで学んだこと詳しくはこちら
@_yussy_

javascriptでプログレスバーを生成する関数を作る

JavaScriptProgressBar

discordで音楽botを作成する際に今流している曲がどこまで再生されているかを出したかったので作りました。
いろいろな場所に応用が効くと思います。

/*
nowposition: 現在の進捗
all: 全てのタスクの量
length: プログレスバーの長さ
nowblock: 現在の進捗の位置を表す記号
block1: すでに作業が終了した場所に出すブロック
block2: まだ作業が終わってない場所に出すブロック
*/
function getprogress(nowposition,all,length,nowblock,block1,block2){
    var oneblockamount = all / length;
    var nowblock = Math.floor(nowposition / oneblockamount);
    var progresstext = "[" + block1.repeat(((nowblock - 1) < 0) ? "0" : nowblock - 1) + "☆" + block2.repeat(length - nowblock) + "]";
    return progresstext;
  }

var progress = getprogress(10, 20, 11, "⭐︎", "■", "□"); 
console.log(progress); // [■■■■■⭐︎□□□□□]
ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
    _yussy_

    コメント

    hn9024@hn9024

    進捗が0の時にバー自体の長さが変わってしまってますね。

    console.log( getprogress( 0, 20, 11, "☆", "■", "□") ); 
  // [☆□□□□□□□□□□□]
console.log( getprogress(10, 20, 11, "☆", "■", "□") ); 
  // [■■■■☆□□□□□□]
console.log( getprogress(20, 20, 11, "☆", "■", "□") ); 
  // [■■■■■■■■■■☆]

    あと、もう少し計算も簡略化できるかと思います。

    const getProgress = (currentPosition, endPosition, size, c0, c1, c2) => {
  const per = currentPosition / endPosition;
  const pos = Math.round((size - 1) * per);
  return `[${c1.repeat(pos)}${c0}${c2.repeat(size - pos - 1)}]`;
};

// example
const max = 20;
const size = 11;
for(let i = 0; i <= max; i++) {
  console.log(getProgress(i, max, size, "☆", "■", "□"), i);
}
/*
[☆□□□□□□□□□□] 0
[■☆□□□□□□□□□] 1
[■☆□□□□□□□□□] 2
[■■☆□□□□□□□□] 3
[■■☆□□□□□□□□] 4
[■■■☆□□□□□□□] 5
[■■■☆□□□□□□□] 6
[■■■■☆□□□□□□] 7
[■■■■☆□□□□□□] 8
[■■■■■☆□□□□□] 9
[■■■■■☆□□□□□] 10
[■■■■■■☆□□□□] 11
[■■■■■■☆□□□□] 12
[■■■■■■■☆□□□] 13
[■■■■■■■☆□□□] 14
[■■■■■■■■☆□□] 15
[■■■■■■■■☆□□] 16
[■■■■■■■■■☆□] 17
[■■■■■■■■■☆□] 18
[■■■■■■■■■■☆] 19
[■■■■■■■■■■☆] 20
*/
    0
    あなたもコメントしてみませんか :)
    ユーザー登録
    すでにアカウントを持っている方はログイン
    記事投稿イベント開催中
    Azure IoTに関する記事を投稿しよう！
    ~
    Qiita 10周年記念イベント - 10年前の自分に伝えたい、勉強しておきたかった技術
    ~
    すべて見る
    0
    0