alert when counter reach specific time

Question

I am using this jquery Count up ( http://demo.tutorialzine.com/2012/09/count-up-jquery/ ) and i am trying to make an alert when the counter reach 00:01:05:40 (one hour - 5 minutes and 40 seconds) i am not an expert and so far i tried the code bellow:

<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

Your problem

Using $('#countdown').html() will return all the HTML within the #countdown element. If your own version is anything like the demo you've 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>

Pulling the numbers

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

" 0 0 0 0 0 2 1 2 "

We can then call replace() to remove those spaces and return a string like:

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

We can then use this instead:

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

Checking periodically

The further problem with your code is that you only run that check once. As the #countdown element changes every second, we can add a timer which 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 equal to 1 second.

Answer 2

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

Answer 3

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

Answer 4

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.