How to use seconds with timer

Question

I am developing a website about bids and I am using the countdown timer for this , if I have the format date the countdown works correctly

$this.html(event.strftime('%D días %H:%M:%S'));

I have a number in database , for examples : 120seconds

How can I change the format to get the seconds ? If i put only %S , he countdown doesn't work.

                    <script src="{{ URL::asset('js/jquery.countdown.js') }}" type="text/javascript"></script>   
                <script src="{{ URL::asset('js/jquery.countdown.min') }}" type="text/javascript"></script>   

<script type="text/javascript">
     $('[data-countdown]').each(function() {
       var $this = $(this), finalDate = $(this).data('countdown');
       $this.countdown(finalDate, function(event) {
         $this.html(event.strftime('%D días %H:%M:%S'));
       });
    });
</script>

UPDATED2

The code works correctly but I only can show one timer because is an IDand I need to use with .class.

I change the document.getElementByID to document.getElementByClassName and doesn't work.

<script type="text/javascript">
            function dateToHHMMSS(date) {
          var hours   = date.getHours() - 1;
          var minutes = date.getMinutes();
          var seconds = date.getSeconds();
          if (hours   < 10) {hours   = "0"+hours;}
          if (minutes < 10) {minutes = "0"+minutes;}
          if (seconds < 10) {seconds = "0"+seconds;}
          return hours+':'+minutes+':'+seconds;
        }
        function countdown(count) {
          var start = new Date();
          var end = new Date(start.getTime() + (count * 1e3)); // * 1e3 to get milliseconds
          var intervalHandle = setInterval(function() {
            var current = new Date();

            var delta = new Date(end.getTime() - current.getTime());
                            $(".countdown").text(dateToHHMMSS(delta));
            if(delta.getTime() <= 0) {
              clearInterval(intervalHandle);
            $(".countdown").text(dateToHHMMSS(delta));
            }
          }, 1e3);
        }
        $('[data-countdown]').each(function() { 
            var id = $(this).attr('data-countdown');
            countdown(id);
        });
    </script>

UPDATED3

Hello another time , when I show the console.log(id) I can see all of the numbers I recieve , but when I use countdown(id) I only send the last id.

 $('[data-countdown]').each(function() { 
            var id = $(this).attr('data-countdown');
            var export_data = [];
            export_data.push(id);
            $.each(export_data, function( index, value ) {
              countdown(value);
            });
        });

Did you try with smaller numbers ? %S 2-digit second (00-59) %s second (0-59) — htatche, Jul 16 '15 at 08:24
This should make it for you ! http://stackoverflow.com/a/15750231/2048774 — htatche, Jul 16 '15 at 08:32
Watch out, you didn't copy the right answer, further below on that Question there is another answer that includes also Days. You will also need to modify a little bit the code in order to make it work for you. — htatche, Jul 16 '15 at 09:20

score 1 · Accepted Answer · answered Jul 16 '15 at 09:31

This should do the trick :

function dateToHHMMSS(date) {
  var hours   = date.getHours() - 1;
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();

  if (hours   < 10) {hours   = "0"+hours;}
  if (minutes < 10) {minutes = "0"+minutes;}
  if (seconds < 10) {seconds = "0"+seconds;}
  return hours+':'+minutes+':'+seconds;
}

function countdown(count) {
  var start = new Date();
  var end = new Date(start.getTime() + (count * 1e3)); // * 1e3 to get milliseconds
  var updateCountdown = function() {
    var current = new Date();
   
    var delta = new Date(end.getTime() - current.getTime());
    document.getElementById('countdown').innerHTML = dateToHHMMSS(delta);
    if(delta.getTime() <= 0) {
      clearInterval(intervalHandle);
      document.getElementById('countdown').innerHTML = "time is over";
    }
  };
  updateCountdown(); //otherwise the first second is not visible
  var intervalHandle = setInterval(updateCountdown, 1e3);
}

countdown(120); //120 or whatever value you want as long as it is in second

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

Thanks @ben , this works correctly , I updated the question with my problem — jc1992, Jul 16 '15 at 09:57
replace `document.getElementById('countdown').innerHTML` by `$('.whateverclassnameyouwant').text` — ben, Jul 16 '15 at 10:51

How to use seconds with timer

1 Answers1