数値の動的な変更を実装する JavaScript の例

この記事では、JavaScriptに関する知識を紹介しており、動的に数値を変化させる方法を中心に内容を紹介していますので、一緒に見ていきましょう。 。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

効果は次のとおりです:

---

これ以上面倒なことはせずに、コードに直接進みましょう:

HTML ファイル:

  <div>
    <div>
      <i></i>
      <div></div>
      <span>常规赛总得分</span>
    </div>

    <div>
      <i></i>
      <div></div>
      <span>常规赛总篮板</span>
    </div>

    <div>
      <i></i>
      <div></div>
      <span>常规赛总助攻</span>
    </div>
  </div>

コード分析:

ここでは、3 つの小さなコンテナを含む大きなコンテナを作成しました。各小さなコンテナ内のデータが表示されます。 using data -*Attributes
(注:data-* は、ページまたはアプリケーションのプライベート カスタム データを保存するために使用されます。これにより、次のことが可能になります。 ## すべての HTML 要素に埋め込む #カスタム データ属性 (カスタム) データを保存する機能 ページの JavaScript で利用して、より良いユーザー エクスペリエンスを作成できます (Ajax 呼び出しやサーバー側データベース クエリ )) ここでは、カスタマイズしたデータ (37062
、10210、10045) を渡します。 js で使用される .

---

css ファイルで使用される:

* {
    box-sizing: border-box;
  }
  
 .outer {
    background-color: #8e44ad;
    color: #fff;
    font-family: 'Roboto Mono', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    overflow: hidden;
    margin: 0;
  }
  
  .counter-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 30px 50px;
  }
  
  .counter {
    font-size: 60px;
    margin-top: 10px;
  }
  
  @media (max-width: 580px) {
    .outer {
      flex-direction: column;
    }
  }

コード分析: css ファイルは非常にシンプルです。

flex

レイアウトを使用し、最後に画面サイズの変化に適応するための メディア クエリを追加します。自分で見てみてください。

---

#js ファイル: #

let counters = document.querySelectorAll('.counter')  //获取到三个counter盒子counters.forEach(item => {
    item.innerText = '0'  //记录分数变化的变量，初始值为0

    const updateData = () => {
        const data = +item.getAttribute('data-set')  //获取到元素中绑定的数据
        const tmp = +item.innerText //临时变量保存变化一次的数据量
    
        const changeData = data / 200  //设置改变的速率

        if(tmp < data) {  //如果临时变量的值小于最终数据的值，那么就给元素进行数据相加
            item.innerText = `${Math.ceil(tmp + changeData)}`  //值数相加，然后进行取整
            setTimeout(updateData,1)  //定时器传入回调函数目的在于动态变化
        } else {
            item.innerText = data  //不满足条件后，证明得到了最终数据，直接渲染
        }

    }
    updateData()  //调用函数，启动函数})

コード分析:

データの動的変更ロジックはここにあります!

まず、データを保存する

3 つの divs

を取得し、次に
• foreach

  メソッドを通じて取得した 3 つのボックスを走査する必要があります。初期スコアは 0 なので、ボックスの innerText を 0 に設定します (注: 0 ここは文字列です) 次に、データを更新するメソッド

  updateData
を定義し、前にカスタマイズしたデータを取得します。ここにいる友人の中には、
• item.getAttribute(data-set)

  を見て混乱する人もいるかもしれません。 記号が前にありますか? は、次の数値が正の数値であることを意味します。これは、コンパイラーに 割り当てられる数値型は数値型であるため、数値を文字列として連結しないでください 次に、一時変数

  tmp
を定義します。目的は、変更された値を
• item.innerText

  に保存し、データ変更率を設定することです。 こちらは 200 で割ったものです。分割したデータが大きければ大きいほど変化率は遅くなり、その逆も同様です。 次に、判断を行います (一時的なデータをそのままにしておきます)金額と合計金額を比較して)、仮金額が合計金額より小さい場合は、

  仮金額tmp
と
• データ変更量changeData

  を加算して丸めます。判定条件を満たさない場合はデータを直接描画しますが、（この時点のデータはすでに最終データ、つまりカスタムデータです）動的変更を実現するにはデータの中心となるのは

  Timer
、判定条件を満たすスコープでタイマーを開始し、コールバック関数
• updateData

  に渡し、1ms呼び出しを1回実装する、データの変更は非常にスムーズに見えます。ロジックが非常に明確であることがわかります。皆さんが js コードを書くときに段階的に始められることを願っています。そうしないと、ロジックが台無しになりやすくなります。将来的には、いくつかの js## を共有します。 # 小さなデモ、一緒に楽しいものを作りましょう!楽しみながらjs開発力も向上します！ 【関連する推奨事項: JavaScript ビデオ チュートリアル

  、
Web フロントエンド

]

---

以上が数値の動的な変更を実装する JavaScript の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。