JavaScript to achieve a simple countdown effect

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

Recommend

MySQL series multi-table join query 92 and 99 syntax examples detailed tutorial

Table of contents 1. Cartesian product phenomenon...

How to import/save/load/delete images locally in Docker

1. Docker imports local images Sometimes we copy ...

MySQL database architecture details

Table of contents 1. MySQL Architecture 2. Networ...

Pure CSS to change the color of the picture

The css technique for changing the color of an im...

HTML weight loss Streamline HTML tags to create web pages

HTML 4 HTML (not XHTML), MIME type is text/html, ...

Teach you to implement a simple promise step by step

Table of contents Step 1: Build the framework Ste...

Solution for forgetting the root password of MySQL5.7 under Windows 8.1

【background】 I encountered a very embarrassing th...

Solve the mysql user deletion bug

When the author was using MySQL to add a user, he...

How to use Nginx to solve front-end cross-domain problems

Preface When developing static pages, such as Vue...

Mysql implementation of full-text search and keyword scoring method example

1. Introduction Today a colleague asked me how to...

Detailed explanation of object literals in JS

Table of contents Preface 1. Set the prototype on...

Summary of HTML Hack Tags in IE Browser

Copy code The code is as follows: <!--[if !IE]...

Native js implements custom scroll bar component

This article example shares the specific code of ...

The principle and configuration of Nginx load balancing and dynamic and static separation

Table of contents 1. Nginx implements load balanc...

Javascript front-end optimization code

Table of contents Optimization of if judgment 1. ...