How to write countdown in jquery

With the rapid development of the Internet, the countdown function has become one of the common requirements in website development. The most common way to implement countdown in front-end pages is to use the jQuery plug-in in the JavaScript library.

This article will introduce you to the specific method of using jQuery plug-in to implement the countdown function on web pages.

1. Create a countdown block in HTML

First you need to create a countdown block in the HTML page, for example:

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

Here, we use a countdown block with A div with four sub-elements, each sub-element corresponds to a time dimension, including days, hours, minutes and seconds. Among them, each time dimension is composed of a span element and a div element. The span element will be used to display time data in real time on the web page, while the div element is used to display the time dimension.

2. Introducing the jQuery plug-in

Before implementing the countdown function, the jQuery library needs to be added to the page. Add the following code to your HTML:

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

Before using the countdown plugin to implement the countdown, we need to add the countdown plugin itself to the HTML file.

3. Introduce the countdown plug-in and implement the countdown

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

This code will add a countdown function to the countdown block until 2022/01/01. At the same time, the HTML content representing the time will be made by it.

4. Custom plug-in implementation details

Now, we have successfully implemented a basic countdown effect on the page. However, this effect can be further customized.

For example, we can set the actions that need to be performed after the countdown ends:

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

In this code, we add a callback function after the countdown ends, so that after the countdown ends, the countdown block "The countdown is finished!" will be displayed.

In addition to setting the callback function, we can also use other attributes to customize the countdown behavior. For example, we can set the frequency of countdown updates:

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

Here, we set the countdown block to be updated every 1000 milliseconds.

5. Summary

Using jQuery plug-in to implement countdown is a common requirement in front-end development. By using the jQuery plug-in, we can add a beautiful and practical countdown effect to the website very simply. In this article, we provide a basic countdown implementation solution, and also introduce how to implement more functional requirements through custom plug-in attributes.

The above is the detailed content of How to write countdown in jquery. For more information, please follow other related articles on the PHP Chinese website!