楽しいコーディング-スタート複数のカウンタ⏱️ 異なる速度で

時々私はスタックオーバーフロージャンキーだと思う🤪... そして、私が見たとき、私の中毒は数ヵ月前より悪くなりましたthis question そして、それに取り組むことから私の指に抵抗することができませんでした.

主な考えは

🛠️ カウンタの設定値に応じて異なる速度でカウンタを起動させるJavaScriptアルゴリズムを構築しますspeed HTMLの属性span タグ要素.
私は、それが他のものと共有する面白いと楽しいコードであると感じます.
あなたがスニペットを試してみたいなら👉 click here

あなたが続く前に。

I've written this post in great detail so that it can be understood by begginers. The idea of the post is to have fun programming, learn/practice a few things, experiment and maybe come up with a different or even a better solution that the one I came up with.

If(you_want_to_continue === true) console.log('keep scrolling..')
else console.log('see you! 👋') 

グラブ☕ そして始めましょう！

お気に入りのJSコードエディタに移動しますJSFiddle はかなりクールですし、セットアップのHTML

<h1 class="counter" speed='3'></h1>
<h1 class="counter" speed='7'></h1>
<h1 class="counter" speed='10'></h1>
<h1 class="counter" speed='12'></h1>

ご覧の通り、私はspeed 属性をh1 要素.クラスcounter は、我々が選択したいどの要素を知っているかquerySelectorAll()

今すぐHTMLコードは準備ができてプログラミングを開始する時間です

宣言しましょうelements コンスト

const elements = document.querySelectorAll('.counter')

💬 知らない人のために、文書方法querySelectorAll() 指定したグループのセレクタにマッチするドキュメントの要素のリストを表す静的NodeListを返します.
🧐 だから、この場合はelements すべてを含むh1 クラスを持つ要素counter .console.log(elements) 出力:

{
  "0": <h3 class="counter" speed="6"></h3>,
  "1": <h3 class="counter" speed="7"></h3>,
  "2": <h3 class="counter" speed="8"></h3>,
  "3": <h3 class="counter" speed="9"></h3>,
  "item": function item() {
    [native code]
},
  "keys": function keys() {
    [native code]
},
  "values": function values() {
    [native code]
},
  "entries": function entries() {
    [native code]
},
  "forEach": function forEach() {
    [native code]
},
  "length": 4
}

これはとてもよく見えません.しかし、elements 簡単です.
彼らは、彼らのそばでアクセスすることができます🗝️ キーelements[key] . 例えばelements['1'] 次のHTML要素を返します

<h3 class="counter" speed="7"></h3>

静的nodelistを使って検索し、動作する方法を理解しましたelements のすべてのHTML要素の間隔を設定する関数を作成することでロジックを構築しましょうelements .

function setCounter(element, speed, limit){
  let count = 0  // every count will start from 0

  let interval = setInterval(() => {
    // in every interval the count will increment by the speed value 
    count += speed

    // update the HTML in this specific element  
    element.innerHTML = count

    // stop the setInterval() if condition is met
    if(count >= limit) clearInterval(interval)

}, 1) // <--- the interval will loop every 1 millisecond
}

これでsetCounter() 関数は、速度を取得するためにすべての要素をループする必要がありますsetCounters() しかし、それを行う前に、我々はすべての速度を取得し、使用する方法について明確にする必要があります.
速度を取得するには、どの要素を指定する必要があります.elements[key].getAttribute('speed')
💬 使用する場合.getAttribute() 返り値は文字列として出力されます.これは、使用することによってプロオーブンtypeof 以下のように:

let key = '1'
let value = elements[key].getAttribute('speed')
console.log(typeof value) // --> string

コードを動作させるには、Number() or parseInt() .
この後、我々はすべてを呼び出す必要がありますsetCounter(element, speed, limit) . これはsetInterval それぞれのパラメータを指定します.

elements.forEach((el, key) => {
  let speed = Number(elements[key].getAttribute('speed'))
  setCounter(el, speed, 1000) 
})

コードが完成したので、正しく動作すると思いますか?
それをショットを与えて、何が起こるかについて見ましょう.そのことを考慮に入れるlimit パラメータsetCounter() is 1000
正しく動作しなかった😭... The setIntervals 働いているが、彼らはより大きいを示しているcount よりlimit . これはspeed カウントに加算されない1 すべてのループでは、それがオーバーフローすることができますので、任意の数にすることができますlimit .
これを解決する一つの方法は、setInterval() , 以下のように:

count = (count >= limit) ? limit : count + speed

これはどうやって動くの？

If count より大きいか等しいlimit , count はlimit そして反対の場合count 等しいcount + speed .
これは、最後のループ数の問題を解決するためのマイナーなパッチです.これを行うことによってカウントは決して限界を超えません.
結果コード✔️

const elements = document.querySelectorAll('.counter')

elements.forEach((el, key) => {
  let speed = Number(elements[key].getAttribute('speed'))
  setCounter(el, speed, 1000)
})

function setCounter(element, speed, limit){
  let count = 0
  let interval = setInterval(() => {
    count = (count >= limit) ? limit : count + speed
    if(count === limit) clearInterval(interval)
    element.innerHTML = count
  }, 1)
}

これは私の最初の投稿です
お気軽に実験/再生コードを共有し、独自のアプローチ👍 もしあるなら🙃