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:

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

< /html>

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:

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

< . . dan merosot sendiri.

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:

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

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

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:

< html>

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

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

>

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!