JavaScript to achieve a simple countdown effect

This article example shares the specific code of javascript to achieve the countdown effect for your reference. The specific content is as follows

Implementation ideas:

1. Create label elements for days, hours, minutes, and seconds on the page and define the styles
2. js obtains the element objects of days, hours, minutes and seconds, so that they can be assigned values later - - - remaining time
3. Define a function to calculate the time difference between the current time and the set time, calculate the remaining days, hours, minutes, and seconds respectively, and assign them to the corresponding element content
4. Use the setInterval() function to set the time difference function to execute every 1 second.
5. Note that before calling the setInterval() function, you should first call the time difference function. Otherwise, when you refresh the page, the original content written in the tag will appear, and then the calculated time difference will appear.

Code example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown effect</title>
    <style>
        div {
            margin: 200px;
        }
        
        span {
            display: block;
            float: left;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin: 5px;
            color: #fff;
            background-color: rgba(0, 0, 0, .8);
        }
    </style>
</head>

<body>
    <div class="time">
        <span class="day">0</span>
        <span>day</span>
        <span class="hour">1</span>
        <span>hours</span>
        <span class="minute">2</span>
        <span> points</span>
        <span class="second">3</span>
        <span>seconds</span>
    </div>
    <script>
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');

        var setTime = +new Date('2021-10-1 09:00:00');
        countDown();
        setInterval(countDown, 1000);

        console.log(+new Date());

        function countDown() {
            var now = +new Date();
            var times = (setTime - now) / 1000;
            var d = parseInt(times / 60 / 60 / 24); //day d = d < 10 ? '0' + d : d;
            day.innerHTML = d; //Give the remaining days to the day box var h = parseInt(times / 60 / 60 % 24); //When h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; //Give the remaining hours to the hour box var m = parseInt(times / 60 % 60); //minutes m = m < 10 ? '0' + m : m;
            minute.innerHTML = m; //divide the rest into the points box var s = parseInt(times % 60); //seconds s = s < 10 ? '0' + s : s;
            second.innerHTML = s; //Give the remaining seconds to the seconds box}
    </script>
</body>

</html>

Note: When calling the setInterval function, just write the function name. Do not write parameters in the function. If you write parameters, the function may not be executed in a loop.
For example: setInterval(countDown, 1000);
Tried writing setInterval(countDown(+new Date('2021-10-1 09:00:00')), 1000);
function countDown(setTime) {,,,}
After writing this, setInterval loses the effect of loop execution function and cannot produce countdown effect. It will only change once each time the page is refreshed.

Page effect:

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
js realizes the countdown effect of clicking to get the verification code
A good js html page countdown can be accurate to seconds
Javascript implements the countdown for product flash sales (time is synchronized with server time)

<<: How to maintain a long connection when using nginx reverse proxy

>>: The advantages and disadvantages of nginx and lvs and their suitable usage environment