jQuery Count Down timer based on Remaining Days Hours Minutes and Seconds

0 votes

I'm creating a system where I have to check the deadline based on the client's initialization. For example, if the client's initialization was today at time x and the deadline is tomorrow or future at time y, I would like to calculate the time remaining inform of a countdown timer. I have managed to get the time remaining and my problem is count down timer to show the remaining days, hours, minutes, and seconds.

The following HTML code indicates the remaining time to the deadline

<span style='color: green;'>
    <span class='e-m-days'>0</span> Days | 
    <span class='e-m-hours'>8</span> Hours | 
    <span class='e-m-minutes'>0</span> Minutes | 
    <span class='e-m-seconds'>1</span> Seconds
</span>

My jQuery code:

<script>
    $(function(){
        var days    = parseInt( $('.e-m-days').html() );
        var hours   = parseInt( $('.e-m-hours').html() );
        var minutes = parseInt( $('.e-m-minutes').html() );
        var seconds = parseInt( $('.e-m-seconds').html() );

        var minutesWrap = 0; 
        var hoursWrap = 0; 
        var daysWrap; 
        var hoursRem = hours;

        var timer = seconds; 
        var counter =seconds;

        function countOrdersRemainingTime(){
            var id = setTimeout(countOrdersRemainingTime, 1000); 

            if(timer < 0){
                minutesWrap ++; 

                timer = 59;

            }

            var minRem = minutes - minutesWrap; 

            if( minRem == -1 ){
                hoursWrap + 1;
                minRem = 59;
                var hoursRem = hours - 1;
            }

            if(days == 0 && hours == 0 && minutes == 0 && seconds == 0){
                clearTimeout(id);
            }






            $('.e-m-seconds').html(timer);
            $('.e-m-minutes').html(minRem);
            $('.e-m-hours').html(hoursRem);


            timer --; 
        }

        countOrdersRemainingTime();


    });
</script>

The key thing is to create a count down timer that counts until the deadline is reached, i.e until the number of days, hours, minutes, and seconds becomes zero. I have tried for hours with no success :(.

Aug 11, 2022 in Web Development by gaurav
• 23,260 points
1,273 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
0 answers
0 votes
0 answers

jQuery countdown timer for minutes and seconds

I want create a jquery countdown timer, ...READ MORE

Aug 12, 2022 in Web Development by gaurav
• 23,260 points
2,705 views
0 votes
0 answers

scroll up and down a div on button click using jquery

I am trying to add a feature ...READ MORE

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
7,222 views
0 votes
1 answer

how to rotate image image 3d in jquery on swipe up and swipe down

If you're not using one of the ...READ MORE

answered Aug 4, 2022 in Web Development by rajatha
• 7,640 points
1,298 views
0 votes
0 answers

Expand form based on radio selection in jQuery & Bootstrap

I am trying to show a part ...READ MORE

Jul 22, 2022 in Web Development by gaurav
• 23,260 points
438 views
0 votes
1 answer

Jquery pickatime, Drop down window not closing after on change event

Maybe your input element falls within label ...READ MORE

answered Aug 2, 2022 in Web Development by rajatha
• 7,640 points
383 views
0 votes
1 answer

jQuery Countdown get time until 10:00 am today or tomorrow

The following should work (console.log() was added for ...READ MORE

answered Aug 4, 2022 in Web Development by rajatha
• 7,640 points
1,384 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,510 points
991 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
14,233 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
22,430 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP