Using Functions:

Question

147

how to countdown to a date

rated 0 times [ 149] [ 2] / answers: 1 / hits: 143226 / 13 Years ago, fri, february 17, 2012, 12:00:00

I am wondering if anyone can help me. After hours of searching tirelessly on here and the web I can't seem to find a simple countdown using jquery. I don't want to use any sort of plugin just a simple jquery code to countdown from a date. I have managed to find this code below. But even with this code placing it in my website nothing appears. I added the jquery file from jquery.com and added the proper divs with counter ID and nothing. If anyone can explain or show me how to make a simple countdown in a function that takes in a date format and returns a countdown I would appreciate the help.

var end = new Date('02/19/2012 10:1 AM');



    var _second = 1000;

    var _minute = _second * 60;

    var _hour = _minute * 60;

    var _day = _hour * 24;

    var timer;



    function showRemaining() {

        var now = new Date();

        var distance = end - now;

        if (distance < 0) {



            clearInterval(timer);

            document.getElementById('countdown').innerHTML = 'EXPIRED!';



            return;

        }

        var days = Math.floor(distance / _day);

        var hours = Math.floor((distance % _day) / _hour);

        var minutes = Math.floor((distance % _hour) / _minute);

        var seconds = Math.floor((distance % _minute) / _second);



        document.getElementById('countdown').innerHTML = days + 'days ';

        document.getElementById('countdown').innerHTML += hours + 'hrs ';

        document.getElementById('countdown').innerHTML += minutes + 'mins ';

        document.getElementById('countdown').innerHTML += seconds + 'secs';

    }



    timer = setInterval(showRemaining, 1000);

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kourtney

Add To Favorites

Follow

Total Points: 368

Total Questions: 103

Total Answers: 85

Location: Bonaire

Member since Sat, May 1, 2021

3 Years ago

kourtney questions

1 Problem with typescript while making request to SWR

Sun, Oct 4, 20, 00:00, 4 Years ago

1 JS DateTimePicker onChange event not working

Tue, Oct 29, 19, 00:00, 5 Years ago

1 NodeJS and Sharp, BMP to PNG Error: Input file contains unsupported image format

Fri, May 24, 19, 00:00, 5 Years ago

1 React Slick slider map not showing slides?

Thu, Apr 4, 19, 00:00, 5 Years ago

1 Cypress - Add custom header for all XHR requests

Fri, Mar 1, 19, 00:00, 5 Years ago

View All

answered 13 Years ago billier · Accepted Answer

This is working fine as a normal javascript.

<script>

var end = new Date('02/19/2012 10:1 AM');



    var _second = 1000;

    var _minute = _second * 60;

    var _hour = _minute * 60;

    var _day = _hour * 24;

    var timer;



    function showRemaining() {

        var now = new Date();

        var distance = end - now;

        if (distance < 0) {



            clearInterval(timer);

            document.getElementById('countdown').innerHTML = 'EXPIRED!';



            return;

        }

        var days = Math.floor(distance / _day);

        var hours = Math.floor((distance % _day) / _hour);

        var minutes = Math.floor((distance % _hour) / _minute);

        var seconds = Math.floor((distance % _minute) / _second);



        document.getElementById('countdown').innerHTML = days + 'days ';

        document.getElementById('countdown').innerHTML += hours + 'hrs ';

        document.getElementById('countdown').innerHTML += minutes + 'mins ';

        document.getElementById('countdown').innerHTML += seconds + 'secs';

    }



    timer = setInterval(showRemaining, 1000);

</script>

<div id="countdown"></div>

Your output is appearing as follows:-

1days 9hrs 3mins 22secs

UPDATE

Using Functions:

<script>



    CountDownTimer('02/19/2012 10:1 AM', 'countdown');

    CountDownTimer('02/20/2012 10:1 AM', 'newcountdown');



    function CountDownTimer(dt, id)

    {

        var end = new Date(dt);



        var _second = 1000;

        var _minute = _second * 60;

        var _hour = _minute * 60;

        var _day = _hour * 24;

        var timer;



        function showRemaining() {

            var now = new Date();

            var distance = end - now;

            if (distance < 0) {



                clearInterval(timer);

                document.getElementById(id).innerHTML = 'EXPIRED!';



                return;

            }

            var days = Math.floor(distance / _day);

            var hours = Math.floor((distance % _day) / _hour);

            var minutes = Math.floor((distance % _hour) / _minute);

            var seconds = Math.floor((distance % _minute) / _second);



            document.getElementById(id).innerHTML = days + 'days ';

            document.getElementById(id).innerHTML += hours + 'hrs ';

            document.getElementById(id).innerHTML += minutes + 'mins ';

            document.getElementById(id).innerHTML += seconds + 'secs';

        }



        timer = setInterval(showRemaining, 1000);

    }



</script>

<div id="countdown"></div>

<div id="newcountdown"></div>

Output will appear as follows:-

how to countdown to a date

Answers

1days 9hrs 3mins 22secs

UPDATE

Using Functions:

0days 23hrs 25mins 8secs

1days 23hrs 25mins 8secs

kourtney