Implementing countdown effect with javascript

Use Javascript to achieve the countdown effect, for your reference, the specific content is as follows

I am still learning the big front end. Please forgive me if there are any irregularities or incorrect ideas in the code. Thank you for your advice.

In some shopping mall websites, we often see a countdown area on the website or app to remind users how much time is left before something happens. Let's use code to implement it.

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 div {
  margin: 300px;
  border: 1px solid pink;
 }

 span {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: blue;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 40px;
 }
 </style>
</head>
<body>
<div>
 <span class="hour">1</span>
 <span class="minute">2</span>
 <span class="second">3</span>
</div>
<script>
 var hours = document.querySelector('.hour')
 var min = document.querySelector('.minute')
 var sce = document.querySelector('.second')
 var inputTime=+new Date('2021-2-8 16:40:00')
 //countDown()//Call first to prevent blank space in the first refresh//Start the timer. This is the timer setInterval(countDown,1) that is started after waiting for 1000ms
 function countDown() {
 var nowTime = +new Date(); // Returns the total number of milliseconds of the current time var times = (inputTime - nowTime) / 1000; // times is the total number of seconds remaining var h = parseInt(times / 60 / 60 % 24); //h = h < 10 ? '0' + h : h;
 hours.innerHTML = h; // Give the remaining hours to the hour black box var m = parseInt(times / 60 % 60); // minutes m = m < 10 ? '0' + m : m;
 min.innerHTML = m;
 var s = parseInt(times % 60); // Current second s = s < 10 ? '0' + s : s;
 sce.innerHTML = s;
 }
</script>
</body>
</html>

Demonstration effect:

Time counts down second by second

Code explanation:

Here I put three inline span elements inside the block div element. Since the width and height of inline elements cannot be changed, they are all replaced with inline block elements.

Here, because the countdown needs to be modified in three span boxes, corresponding to the hours, minutes, and seconds respectively, the events of these three spans are obtained. Then use the inputTime variable to receive our destination time.

Then create a function named countDown. The variable nowTime is used in the function to receive the current time. Because the received time is in milliseconds, a variable times is used to receive the time difference between the destination time and the current time, and then divided by 1000, because 1s=1000ms, the remaining seconds are obtained here.

Use h to represent the remaining hours: one day = 24 hours, one hour = 60 minutes, and 1 minute = 60 seconds. So here we use the total number of seconds/60/60%24 to get the remaining hours. Then, to make the style look better, we set the displayed decimal places to two digits, using the ternary operator: Is the hour less than 10? If it is less than 10, add '0' in front of it; if it is greater than 10, just return the number. And use h to receive, and then give h to the hours box. The same principle applies to the minutes and seconds below.
Then the function is written, and we use the timer to call this function with an interval of 1/1000ms.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS countdown implementation code (hours, minutes, seconds)
JS countdown (days, hours, minutes, seconds)
Simple and easy to use countdown js code
js code to realize the 60-second countdown when clicking the button
2 simple js countdown methods
Example of implementing a simple countdown function using native JS
js countdown jump example after a few seconds
A good js html page countdown can be accurate to seconds
js realizes the countdown effect of clicking to get the verification code
Javascript implements the countdown for product flash sales (time is synchronized with server time)

<<: MySQL PXC builds a new node with only IST transmission (recommended)

>>: Using Docker run options to override settings in the Dockerfile