この記事では、JavaScriptに関する知識を紹介しており、動的に数値を変化させる方法を中心に内容を紹介していますので、一緒に見ていきましょう。 。
[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]
効果は次のとおりです:
これ以上面倒なことはせずに、コードに直接進みましょう:
HTML ファイル:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
コード分析:
ここでは、3 つの小さなコンテナを含む大きなコンテナを作成しました。各小さなコンテナ内のデータが表示されます。 using data -*
Attributes
(注:data-*
は、ページまたはアプリケーションのプライベート カスタム データを保存するために使用されます。これにより、次のことが可能になります。 ## すべての HTML 要素に埋め込む #カスタム データ属性 (カスタム) データを保存する機能
ページの JavaScript で利用して、より良いユーザー エクスペリエンスを作成できます (Ajax 呼び出しやサーバー側データベース クエリ
)) ここでは、カスタマイズしたデータ (
37062
、10210
、10045
) を渡します。 js で使用される .
css ファイルで使用される:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
|
コード分析: css ファイルは非常にシンプルです。
flex レイアウトを使用し、最後に画面サイズの変化に適応するための メディア クエリ
を追加します。自分で見てみてください。
#js ファイル: #
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
データの動的変更ロジックはここにあります!
まず、データを保存する
3 つの divs メソッドを通じて取得した 3 つのボックスを走査する必要があります。初期スコアは 0 なので、ボックスの innerText
を 0 に設定します (注: 0
ここは文字列です) 次に、データを更新するメソッド
を見て混乱する人もいるかもしれません。
記号が前にありますか?
は、次の数値が正の数値であることを意味します。これは、コンパイラーに 割り当てられる数値型は数値型であるため、数値を文字列として連結しないでください
次に、一時変数
に保存し、データ変更率を設定することです。 こちらは 200 で割ったものです。分割したデータが大きければ大きいほど変化率は遅くなり、その逆も同様です。
次に、判断を行います (一時的なデータをそのままにしておきます)金額と合計金額を比較して)、仮金額が合計金額より小さい場合は、
を加算して丸めます。判定条件を満たさない場合はデータを直接描画しますが、(この時点のデータはすでに最終データ、つまりカスタムデータです)動的変更を実現するにはデータの中心となるのは
に渡し、1ms
呼び出しを1回実装する、データの変更は非常にスムーズに見えます。ロジックが非常に明確であることがわかります。皆さんが js コードを書くときに段階的に始められることを願っています。そうしないと、ロジックが台無しになりやすくなります。将来的には、いくつかの js## を共有します。 # 小さなデモ、一緒に楽しいものを作りましょう!楽しみながらjs開発力も向上します!
【関連する推奨事項:
JavaScript ビデオ チュートリアル
以上が数値の動的な変更を実装する JavaScript の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。