CODEWITHSUNDEEP
htmljquery
user3835444
user3835444

Reputation: 67

When countdown reaches zero, stop and display a message

I need help with my project. I am using countdown.jquery. The countdown.jquery has built in stop/start, pause/resume function but unfortunately I can't find examples how to implement it. I have multiple countdowns.

<span class="countdown" value="3000-01-01 12:50:00"></span>
<span class="countdown" value="3000-01-01 07:49:00"></span>
<span class="countdown" value="3000-01-01 15:49:00"></span>

My scripts looks like this:

 $(function(){        
      $('.countdown').each(function(){
         $(this).countdown($(this).attr('value'), function(event) {
         $(this).text(event.strftime('%H:%M:%S'));
      });
    });
 });

The countdown works perfectly, but the countdown won't stop, once it reachez zero, it will go back to 24:00:00

Here's the link to the jQuery.countdown but I don't know where to insert and what code to use to stop the countdown. I also would like to display a message 'Time's Up' when the countdown reaches zero or 00:00:00 for example something like this, replacing the countdown timer with text that say's time's up.

if - countdown reaches zero $('.countdown').text('Time's Up');

http://hilios.github.io/jQuery.countdown/documentation.html#events

Upvotes: 0

Views: 443

Answers (1)

gaetanoM
gaetanoM

Reputation: 42044

You can use finish.countdown event.

I changed a bit your code in order to last the counter only 5 seconds.....

how do i set the value of the countdown to automatically get the date today? for example <span class="countdown" value="[today's year]-[today's month]-[day to day] 12:50:00> so that my countdown will run every day.

It's enough to:

var d = new Date ();
var dstr =  [d.getFullYear(), d.getMonth()+1, d.getDate()].join('-') + ' 12:50:00';


$('.countdown').each(function(idx, ele) {
                // next 4 lines are only per demo
                var d = new Date ();
                d.setSeconds( (new Date ()).getSeconds() + 5 );
                var dstr =  [d.getFullYear(), d.getMonth()+1, d.getDate()].join('-')+' '+
                        [d.getHours(), d.getMinutes(), d.getSeconds()].join(':');
                $(this).countdown(d, function(event) {
                    $(this).text(event.strftime('%H:%M:%S'));
                }).on('finish.countdown', function(e) {
                    $(this).text("Time's Up");
                });
            });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hilios/jQuery.countdown@master/dist/jquery.countdown.min.js"></script>


<span class="countdown" value="3000-01-01 12:50:00"></span>
<span class="countdown" value="3000-01-01 00:00:10"></span>
<span class="countdown" value="2020-09-18 20:00:00"></span>

Upvotes: 1

Related Questions