Bagaimana untuk menulis undur dalam jquery

Dengan perkembangan pesat Internet, fungsi kira detik telah menjadi salah satu keperluan biasa dalam pembangunan laman web. Cara paling biasa untuk melaksanakan undur di halaman hadapan adalah dengan menggunakan pemalam jQuery dalam pustaka JavaScript.

Artikel ini akan memperkenalkan anda kepada kaedah khusus menggunakan pemalam jQuery untuk melaksanakan fungsi kira detik pada halaman web.

1. Buat blok kira detik dalam HTML

Mula-mula anda perlu membuat blok kira detik dalam halaman HTML, contohnya:

<div id="countdown">
  <div class="countdown-section">
    <span class="countdown-amount days">0</span>
    <div class="countdown-period">Days</div>
  </div>
  <div class="countdown-section">
    <span class="countdown-amount hours">0</span>
    <div class="countdown-period">Hours</div>
  </div>
  <div class="countdown-section">
    <span class="countdown-amount minutes">0</span>
    <div class="countdown-period">Minutes</div>
  </div>
  <div class="countdown-section">
    <span class="countdown-amount seconds">0</span>
    <div class="countdown-period">Seconds</div>
  </div>
</div>

Di sini, kami menggunakan blok kira detik dengan A div dengan empat sub-elemen, setiap sub-elemen sepadan dengan dimensi masa, termasuk hari, jam, minit dan saat. Antaranya, setiap dimensi masa terdiri daripada elemen span dan elemen div Elemen span akan digunakan untuk memaparkan data masa dalam masa nyata pada halaman web, manakala elemen div digunakan untuk memaparkan dimensi masa.

2. Perkenalkan pemalam jQuery

Sebelum melaksanakan fungsi kira detik, perpustakaan jQuery perlu ditambahkan pada halaman. Tambahkan kod berikut pada HTML anda:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Sebelum menggunakan pemalam kira detik untuk melaksanakan kira detik, kita perlu menambah pemalam kira detik itu sendiri pada fail HTML.

3. Perkenalkan pemalam kira detik dan laksanakan kira detik

<script src="jquery.countdown.js"></script>
<script>
  $('#countdown').countdown('2022/01/01', function(event) {
    $(this).html(event.strftime('<div class="countdown-section"><span class="countdown-amount days">%D</span><div class="countdown-period">Days</div></div><div class="countdown-section"><span class="countdown-amount hours">%H</span><div class="countdown-period">Hours</div></div><div class="countdown-section"><span class="countdown-amount minutes">%M</span><div class="countdown-period">Minutes</div></div><div class="countdown-section"><span class="countdown-amount seconds">%S</span><div class="countdown-period">Seconds</div></div>'));
  });
</script>

Kod ini akan menambah fungsi kira detik pada blok kira detik sehingga 2022/01/01. Pada masa yang sama, kandungan HTML yang mewakili masa akan dibuat olehnya.

4. Butiran pelaksanaan pemalam tersuai

Kini, kami telah berjaya melaksanakan kesan kira detik asas pada halaman. Walau bagaimanapun, kesan ini boleh disesuaikan lagi.

Sebagai contoh, kita boleh menetapkan tindakan yang perlu dilakukan selepas kira detik tamat:

<script>
  $('#countdown').countdown('2022/01/01', function(event) {
    $(this).html(event.strftime('<div class="countdown-section"><span class="countdown-amount days">%D</span><div class="countdown-period">Days</div></div><div class="countdown-section"><span class="countdown-amount hours">%H</span><div class="countdown-period">Hours</div></div><div class="countdown-section"><span class="countdown-amount minutes">%M</span><div class="countdown-period">Minutes</div></div><div class="countdown-section"><span class="countdown-amount seconds">%S</span><div class="countdown-period">Seconds</div></div>'));
  }).on('finish.countdown', function(event) {
    $(this).html('The countdown is finished!');
  });
</script>

Dalam kod ini, kami menambah fungsi panggil balik selepas kira detik tamat, supaya selepas kira detik tamat, blok undur "Undur sudah selesai!"

Selain menetapkan fungsi panggil balik, kami juga boleh menggunakan atribut lain untuk menyesuaikan tingkah laku kira detik. Sebagai contoh, kami boleh menetapkan kekerapan kemas kini kira detik:

$('#countdown').countdown('2022/01/01', { 
  interval: 1000 
}, function(event) {
  // ...
});

Di sini, kami menetapkan blok kira detik untuk dikemas kini setiap 1000 milisaat.

5. Ringkasan

Menggunakan pemalam jQuery untuk melaksanakan kira detik ialah keperluan biasa dalam pembangunan bahagian hadapan. Dengan menggunakan pemalam jQuery, kami boleh menambah kesan kira detik yang cantik dan praktikal pada tapak web dengan sangat mudah. Dalam artikel ini, kami menyediakan penyelesaian pelaksanaan kira detik asas, dan juga memperkenalkan cara melaksanakan lebih banyak keperluan berfungsi melalui atribut pemalam tersuai.

Atas ialah kandungan terperinci Bagaimana untuk menulis undur dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!