JavaScript で数値を変更し続ける方法

JavaScript の継続的な開発と進歩に伴い、Web サイトの機能性と美しさを向上させるために、さまざまな魔法のテクニックや特殊効果を試し始める人が増えています。その中でも、数値を動的に変更することは、ユーザーの注意を引き付け、インタラクティブなエクスペリエンスを強化し、それによって Web サイトのユーザー維持率とコンバージョン率を向上させることができる一般的で実用的なテクニックです。では、JavaScript を使用して数値の変更を実装するにはどうすればよいでしょうか?次に、この記事ではその実装方法とテクニックを詳しく紹介します。

1. ネイティブ JavaScript を使用して数値の自己インクリメントと自己デクリメントを実現する

数値の自己インクリメントと自己デクリメントを実現する最も基本的な方法は、ネイティブ JavaScript を使用して実装することです。単純な加算と減算の演算。これは、ページ上のボタンまたは自動トリガーによって実現できます。例:

100db36a723c770d327fc0aef2ce13b1
6c04bd5ca3fcae76e30b72ad730ca86d

<p id="count">0</p>
<button onclick="increase()">增加</button>
<button onclick="decrease()">减少</button>
<script>
  var count = 0;
  function increase() {
    count++;
    document.getElementById("count").innerHTML = count;
  }
  function decrease() {
    count--;
    document.getElementById("count").innerHTML = count;
  }
</script>

36cc49f0c466276486e50c850b7e4956
081a934c7ac7a6b28b4ef3b648acdd09

このコードは、ページにカウンターを追加し、[増加] ボタンと [減少] ボタンを使用して数値を増減します。 JavaScript DOM 操作を通じて、ページ内の HTML 要素を動的に変更し、数値を更新できます。

2. jQuery を使用して数値の自動増減を実現する

jQuery は、JavaScript コードの作成を簡素化し、開発効率を向上させることができる人気の JavaScript ライブラリです。 jQuery を使用する場合、次のコードを使用して数値の増加と減少を実現できます:

100db36a723c770d327fc0aef2ce13b1
6c04bd5ca3fcae76e30b72ad730ca86d

<p id="count">0</p>
<button id="increase">增加</button>
<button id="decrease">减少</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $("#increase").click(function() {
      $("#count").html(function(i, val) {
        return Number(val) + 1;
      });
    });
    $("#decrease").click(function() {
      $("#count").html(function(i, val) {
        return Number(val) - 1;
      });
    });
  });
</script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

このコードは 2 つのボタンのクリック イベントを定義します。各クリック イベントは、jQuery の html() メソッドを通じて対応する HTML 要素のコンテンツを変更し、それによって数値の自動増分を実現します。 . そして自己減少します。

3. CSS3 アニメーションを使用してデジタル スクロール効果を実現する

ページ デザインでは、数字のスクロール、反転、その他の効果など、CSS3 アニメーションを通じてデジタルの増減により、より鮮明な効果を実現できます。次のコードは、CSS3 を通じて数値スクロール効果を実現する方法を示しています。

<style>
  .box {
    width: 150px;
    height: 30px;
    font-size: 24px;
    font-weight: bold;
    color: black;
    overflow: hidden;
  }
  .roll {
    animation-name: num-roll;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes num-roll {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-100%);
    }
  }
</style>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

このコードでは、クラス「box」を持つ HTML 要素を定義し、CSS3 アニメーション効果を使用してクラス名「roll」を持つ子要素のスクロール効果。 JavaScript コードは数値の増減を実装し、querySelector() メソッドを通じて HTML 要素の参照を取得し、数値の値を動的に変更します。数字が変化すると、CSS3 アニメーション効果が自動的にトリガーされ、鮮やかでダイナミックなデジタル スクロール効果が実現します。

4. 既製の JavaScript ライブラリを使用してデジタル特殊効果を実装する

ネイティブ JavaScript と jQuery に加えて、デジタル特殊効果を直接実装できる既製の JavaScript ライブラリが多数あります。たとえば、CountUp.js は数値の自動増減に特化したライブラリで、さまざまな特殊効果、スタイル、パラメーターのカスタマイズを実現できます。 CountUp.js ライブラリを使用すると、対応するコードとライブラリ ファイルを HTML に導入し、数値の増加と減少を実現するアニメーション効果のパラメータを設定するだけで済みます。例:

07e6e06e0dc95dc83bb70d14dca11cbe

93f0f5c25f18dab9d176bd4f6de5d30e

<div class="box">
  <span class="roll">0</span>
</div>
<button onclick="increase()">增加</button>
<button onclick="decrease()">减少</button>
<script>
  var count = 0;
  function increase() {
    count++;
    document.querySelector(".roll").innerHTML = count;
  }
  function decrease() {
    count--;
    document.querySelector(".roll").innerHTML = count;
  }
</script>

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.7/countUp.min.js"></script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

これ このコードは、CountUp.js ライブラリを使用して、単純な数値の自動インクリメントを実装します。start() メソッドと reset() メソッドを使用して、数値の自動インクリメント アニメーション効果を開始および停止できます (アニメーション パラメーターはカスタマイズ可能です）。このライブラリには、デジタル特殊効果に対するさまざまな実際のニーズを満たすことができる、豊富な特殊効果、スタイル、コールバック関数関数も用意されています。

概要

上記の方法と技術を通じて、Web ページ内の数値の動的な変化効果を実現し、それによってユーザーのインタラクティブなエクスペリエンスとページの美しさを向上させることができます。もちろん、さまざまな方法、テクニック、ライブラリ ファイルには、それぞれ独自の長所、短所、および適用可能なシナリオがあります。実際の開発では、ページの要件、技術的な実装の難易度、メンテナンスコストなどの要因に基づいて、数値の動的な変化を実現するための最適な方法を選択し、Web サイトのユーザーエクスペリエンスと競争力を向上させる必要があります。

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