Bagaimana untuk terus menukar nombor dalam JavaScript

Dengan pembangunan berterusan dan kemajuan JavaScript, semakin ramai orang mula mencuba pelbagai teknik ajaib dan kesan khas untuk meningkatkan fungsi dan keindahan tapak web. Antaranya, menukar nombor secara dinamik ialah teknik biasa dan praktikal yang boleh menarik perhatian pengguna, meningkatkan pengalaman interaktif, dan dengan itu meningkatkan kadar pengekalan pengguna dan kadar penukaran tapak web. Jadi, bagaimana untuk melaksanakan perubahan nombor menggunakan JavaScript? Seterusnya, artikel ini akan memperkenalkan kaedah dan teknik pelaksanaan secara terperinci.

1. Gunakan JavaScript asli untuk merealisasikan kenaikan dan pengurangan nombor secara automatik

Kaedah paling asas untuk merealisasikan kenaikan dan penurunan nombor automatik ialah menggunakan JavaScript asli untuk merealisasikan operasi tambah dan tolak yang mudah. Ini boleh dicapai melalui butang pada halaman atau pencetus automatik, contohnya:

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

Kod ini menambah pembilang pada halaman, dan kemudian menggunakan butang "Naikkan" dan "Kurangkan" untuk menambah dan mengurangkan bilangan. Melalui operasi DOM JavaScript, elemen HTML dalam halaman boleh diubah suai secara dinamik dan nombor dikemas kini.

2. Gunakan jQuery untuk merealisasikan kenaikan dan penurunan nombor automatik

jQuery ialah perpustakaan JavaScript yang popular, yang boleh memudahkan penulisan kod JavaScript dan meningkatkan kecekapan pembangunan. Jika anda menggunakan jQuery, anda boleh menggunakan kod berikut untuk merealisasikan kenaikan dan pengurangan nombor:

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

3. Gunakan animasi CSS3 untuk mencapai kesan tatal digital

Dalam reka bentuk halaman, penambahan dan pengurangan nombor boleh dicapai melalui animasi CSS3 untuk mencapai kesan yang lebih jelas, seperti tatal nombor, Flip dan kesan lain. Kod berikut menunjukkan cara untuk mencapai kesan tatal digital melalui CSS3:

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

<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>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<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>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Dalam kod ini, kami mentakrifkan elemen HTML dengan kelas "kotak", dan kemudian menggunakan kesan animasi CSS3 untuk Mengawal kesan menatal elemen kanak-kanak dengan nama kelas "gulungan". Kod JavaScript melaksanakan kenaikan dan pengurangan nombor, mendapatkan rujukan elemen HTML melalui kaedah querySelector() dan kemudian mengubah suai nilai nombor secara dinamik. Apabila nombor berubah, kesan animasi CSS3 dicetuskan secara automatik, dengan itu mencapai kesan tatal digital yang jelas dan dinamik.

4. Gunakan perpustakaan JavaScript siap pakai untuk melaksanakan kesan khas digital

Selain JavaScript asli dan jQuery, terdapat banyak perpustakaan JavaScript siap sedia yang boleh melaksanakan kesan khas digital secara langsung. Sebagai contoh, CountUp.js ialah perpustakaan yang digunakan khusus untuk kenaikan dan pengurangan nombor automatik, dan boleh merealisasikan penyesuaian pelbagai kesan khas, gaya dan parameter. Menggunakan pustaka CountUp.js, anda hanya perlu memperkenalkan kod dan fail pustaka yang sepadan dalam HTML, dan kemudian tetapkan parameter kesan animasi untuk merealisasikan kenaikan dan pengurangan nombor, contohnya:

07e6e06e0dc95dc83bb70d14dca11cbe

a801d9c20ab268ecdf000c4cd37b7338

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

4f7e9ee3c387fa7cd73e9b3fa70c81fd
3c30aa6c4c72dd8ead30672a51b803a7

<p id="counter"></p>
<button onclick="startCounter()">开始</button>
<button onclick="stopCounter()">停止</button>
<script>
  var countUp = new CountUp("counter", 0, 1000, 0, 2);
  function startCounter() {
    if (!countUp.error) {
      countUp.start();
    } else {
      console.error(countUp.error);
    }
  }
  function stopCounter() {
    countUp.reset();
  }
</script>

493a3ce9d2a3c91fa60924ecf20a1e6a
73a6ac4ed44ffec12cee46588e518a5e >

Ini Kod ini menggunakan perpustakaan CountUp.js untuk melaksanakan penambahan automatik nombor mudah Anda boleh memulakan dan menghentikan kesan animasi kenaikan automatik nombor melalui kaedah mula() dan kaedah set semula() (parameter animasi boleh. disesuaikan). Perpustakaan ini juga menyediakan pelbagai kesan khas, gaya dan fungsi fungsi panggil balik, yang boleh memenuhi pelbagai keperluan praktikal untuk kesan khas digital.

Ringkasan

Melalui kaedah dan teknik di atas, kami boleh mencapai kesan perubahan dinamik nombor dalam halaman Web, dengan itu meningkatkan pengalaman interaktif pengguna dan keindahan halaman. Sudah tentu, kaedah, teknik dan fail perpustakaan yang berbeza mempunyai kelebihan, kelemahan dan senario yang boleh digunakan. Dalam pembangunan sebenar, kita perlu memilih kaedah yang paling sesuai untuk mencapai perubahan dinamik dalam nombor berdasarkan keperluan halaman, kesukaran pelaksanaan teknikal, kos penyelenggaraan dan faktor lain, dengan itu meningkatkan pengalaman pengguna dan daya saing laman web.

Atas ialah kandungan terperinci Bagaimana untuk terus menukar nombor dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!