Bagaimana untuk mencipta kesan undur responsif menggunakan HTML, CSS dan jQuery

Cara menggunakan HTML, CSS dan jQuery untuk mencipta kesan kira detik responsif

Gambaran keseluruhan:
Kesan kira detik ialah salah satu fungsi biasa dalam pembangunan web, terutamanya sesuai untuk promosi acara, promosi produk dan senario lain. Artikel ini akan mengajar anda cara menggunakan HTML, CSS dan jQuery untuk mencipta kesan kira detik responsif dan memberikan contoh kod khusus.

Langkah pelaksanaan:

1. Cipta struktur HTML:

   <div id="countdown">
     <div class="timer">
    <span id="days"></span>
    <span>:</span>
    <span id="hours"></span>
    <span>:</span>
    <span id="minutes"></span>
    <span>:</span>
    <span id="seconds"></span>
     </div>
   </div>

   Salin selepas log masuk

   Kesan kira detik akan dipaparkan dalam elemen div dengan id "kira detik".

2. Tambah gaya CSS:

   #countdown {
     text-align: center;
   }
   
   .timer {
     display: inline-block;
     font-size: 30px;
     background-color: #000;
     color: #fff;
     padding: 10px 20px;
   }
   
   .timer span {
     margin: 0 5px;
     font-weight: bold;
   }
   

   Salin selepas log masuk

   Dengan menetapkan gaya, kesan kira detik akan dipaparkan di tengah halaman dan gaya nombor detik akan ditetapkan.

3. Tambah kod JavaScript:
   Mula-mula, perkenalkan perpustakaan jQuery:

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

   Salin selepas log masuk

   Kemudian, tulis logik undur:

   function countdown(endDate) {
     var timer;
     var daysSpan = $('#days');
     var hoursSpan = $('#hours');
     var minutesSpan = $('#minutes');
     var secondsSpan = $('#seconds');
   
     function calculate() {
    var now = new Date();
    var remainingTime = endDate.getTime() - now.getTime();
   
    var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
    var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
   
    daysSpan.text(days);
    hoursSpan.text(('0' + hours).slice(-2));
    minutesSpan.text(('0' + minutes).slice(-2));
    secondsSpan.text(('0' + seconds).slice(-2));
   
    if (remainingTime <= 0) {
      clearInterval(timer);
    }
     }
   
     function start() {
    calculate();
    timer = setInterval(calculate, 1000);
     }
   
     start();
   }
   
   // 设置倒计时结束时间为：2023年1月1日
   var endDate = new Date('2023-01-01T00:00:00');
   countdown(endDate);

   Salin selepas log masuk

   Kod di atas mentakrifkan fungsi undur undur, dengan mendapatkan masa semasa dan masa Tamat yang ditentukan, mengira baki hari, jam, minit dan saat dan memaparkannya pada halaman HTML. countdown，通过获取当前时间和指定的结束时间，计算剩余的天数、小时数、分钟数和秒数，并将它们显示在HTML页面上。

代码解析：

• clearInterval(timer)用于停止定时器，当倒计时结束时，定时器将停止运行。
• setInterval(calculate, 1000)

Analisis kod:

clearInterval(timer) digunakan untuk menghentikan pemasa Apabila kira detik tamat, pemasa akan berhenti berjalan.
• setInterval(kira, 1000) Tetapkan fungsi kira untuk dipanggil setiap 1 saat untuk mencapai kira detik kemas kini masa nyata.

Nota:

Sila pastikan fail perpustakaan jQuery diperkenalkan dengan betul sebelum menggunakan contoh kod di atas. 🎜🎜Untuk membalas saiz skrin peranti berbeza, anda boleh menggunakan pertanyaan media dan jenis media CSS untuk menjadikan kesan kira detik mempunyai kesan paparan yang baik pada peranti berbeza. 🎜🎜🎜Ringkasan: 🎜Melalui HTML, CSS dan jQuery, kami boleh melaksanakan kesan kira detik responsif dengan mudah. Semoga contoh kod yang disediakan dalam artikel ini akan membantu anda menggunakan fungsi undur dalam projek anda sendiri. 🎜

Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan undur responsif menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!