How to create a responsive countdown effect using HTML, CSS and jQuery

How to use HTML, CSS and jQuery to create a responsive countdown effect

Overview:
The countdown effect is one of the common functions in web development, especially Suitable for event promotion, product promotion and other scenarios. This article will teach you how to use HTML, CSS and jQuery to create a responsive countdown effect, and provide specific code examples.

Implementation steps:

1. Create HTML structure:

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

   The countdown effect will be displayed in the div element with the id "countdown".

2. Add CSS style:

   #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;
   }
   

   By setting the style, the countdown effect is displayed in the center of the page, and the countdown number style is set.

3. Add JavaScript code:
   First, introduce the jQuery library:

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

   Then, write the countdown logic:

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

   The above code defines a The countdown function countdown calculates the remaining days, hours, minutes and seconds by getting the current time and the specified end time, and displays them on the HTML page.

Code analysis:

• clearInterval(timer) is used to stop the timer. When the countdown ends, the timer will stop running. .
• setInterval(calculate, 1000) Set the calculate function to be called every 1 second to achieve real-time update countdown.

Note:

• Please ensure that the jQuery library file is correctly introduced before using the above code example.
• In order to respond to the screen sizes of different devices, you can use media queries and CSS media types to make the countdown effects have good display effects on different devices.

Summary:
Through HTML, CSS and jQuery, we can easily implement a responsive countdown effect. Hopefully the code examples provided in this article will help you use countdown functionality in your own projects.

The above is the detailed content of How to create a responsive countdown effect using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!