How to set countdown in javascript

JavaScript setting countdown

Countdown is a very interesting and practical function. On the website, it can be used to remind users of the arrival of certain important events, such as sale time, rush sale time, etc. In this article, we will learn how to set a countdown using JavaScript.

Step 1: Get the current time

Getting the current time is the first step to implement the countdown function. To get the current time, you can use JavaScript's built-in functions. The following is a sample code to obtain the current time:

var currentDate = new Date();

The above code creates a Date object, which represents the current date and time.

Step 2: Set the deadline

After getting the current time, the next step is to set the deadline. The deadline can be specified manually or obtained from the server. The following is a sample code for manually setting the deadline:

var dueDate = new Date('2021-12-31 23:59:59');

The above code creates a Date object, which represents the time point of 23:59:59 on December 31, 2021.

Step 3: Calculate the countdown time

After getting the current time and setting the deadline, the next step is to calculate the countdown time. Calculating the countdown time is as simple as subtracting the current date from the due date. Here is a sample code that calculates the countdown time:

var timeLeft = dueDate.getTime() - currentDate.getTime();

The above code calculates the number of milliseconds between the deadline and the current date. If we want to convert them into days, hours, minutes and seconds, we can convert them as follows:

var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

The above code converts milliseconds into days, hours, minutes and seconds .

Step 4: Display the countdown

After calculating the countdown time, the last step is to display the countdown time on the web page. This can be achieved by assigning the countdown time to the textContent attribute of the HTML element. The following is a sample code that displays a countdown:

document.getElementById('countdown').textContent = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒 ';

The above code displays the calculated number of days, hours, minutes, and seconds on the HTML element with the id countdown.

Step 5: Real-time update countdown

The above code will only calculate the countdown and display it when the page is loaded. If you want to achieve the effect of real-time update countdown, you can use the setInterval function. The setInterval function allows a function to be executed regularly, thereby achieving the effect of updating the countdown in real time. The following is a sample code that uses the setInterval function to implement real-time update countdown:

setInterval(function() {
  var currentDate = new Date();
  var timeLeft = dueDate.getTime() - currentDate.getTime();
  var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
  var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
  document.getElementById('countdown').textContent = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒 ';
}, 1000);

In the above code, the setInterval function executes an anonymous function every 1000 milliseconds (i.e. 1 second), thereby achieving the effect of real-time update countdown .

Summary

Countdown is a very practical and interesting function that can be used in web pages to attract users’ attention. Setting up a countdown using JavaScript is not complicated and only takes a few steps to complete. First get the current time, then set the deadline, then calculate the countdown time, and finally display the countdown time on the web page. If you need to achieve the effect of updating the countdown in real time, you can use the setInterval function.

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