Warning when the counter reaches a certain time

Question

I am using this jquery Count up ( http://demo.tutorialzine.com/2012/09/count-up-jquery/ ) and I am trying to give a warning when the counter reaches 00: 01: 05: 40 (one hour - 5 minutes and 40 seconds) I am not an expert, and so far I have tried the code below:

<script> $(document).ready(function(){ var mytime = $('#countdown').html(); if (mytime == "00:01:05:40"){ alert ('Done'); } }); </script> 

Source Code: http://tutorialzine.com/2012/09/count-up-jquery/

thanks

Answer 1

try to do it with

 $(function(){ setInterval(function(){ var mytime = $('#countdown').text().replace(/\s+/g, ''); if (mytime == "00010540"){ alert ('Done'); } },1000); } 

this will run your function every half second to see if it matches the time you want.

Answer 2

Your problem

Using $('#countdown').html() returns all the HTML in the #countdown element. If your own version is like the demo you linked to, this will return:

 <span class="countDays"><span class="position"> <span class="digit static" style="top: 0px; opacity: 1;">0</span> </span> <span class="position"> <span class="digit static" style="top: 0px; opacity: 1;">0</span> </span></span><span class="countDiv countDiv0"></span><span class="countHours"><span class="position"> <span class="digit static" style="top: 0px; opacity: 1;">0</span> </span> <span class="position"> <span class="digit static" style="top: 0px; opacity: 1;">0</span> </span></span><span class="countDiv countDiv1"></span><span class="countMinutes"><span class="position"> <span class="digit static" style="top: 0px; opacity: 1;">0</span> </span> <span class="position"> <span class="digit static" style="top: 0px; opacity: 1;">0</span> </span></span><span class="countDiv countDiv2"></span><span class="countSeconds"><span class="position"> <span class="digit static" style="top: 0px; opacity: 1;">1</span> </span> <span class="position"> <span class="digit static" style="top: 0px; opacity: 1;">7</span> </span></span> 

Stretching numbers

If you want to return the numbers, you can instead press text() . This will initially give you:

"0 0 0 0 0 2 1 2"

Then we can call replace() to remove these spaces and return a string, for example:

 $('#countdown').text().replace(/\s+/g, ''); -> "00000212" 

Then we can use this:

 var mytime = $('#countdown').text().replace(/\s+/g, ''); if (mytime == "00010540") ... 

Periodic check

A further problem with your code is that you only perform this check once. Since the #countdown element changes every second, we can add a timer that checks this value every second:

 setInterval(function() { // Your function here var mytime = $('#countdown').text().replace(/\s+/g, ''); if (mytime == "00010540") ... }, 1000); 

Here 1000 is 1000 milliseconds, which is 1 second.

Answer 3

$('#countdown').html() will return all html elements. Try using .text() , this only returns text.

Answer 4

 <script> $(document).ready(function() { setInterval(function() { var mytime = $('#countdown').text(); if (mytime == "00:01:05:40") { alert ('Done'); } }, 1000); }); </script>