Add hours with the Final Countdown plugin

Asked

Viewed 417 times

2

I’m running a countdown system and I’m using "The Final Countdown jQuery"

$('#clock').countdown('2015/02/16', function(event) {
    $(this).html(event.strftime('%D dias %H:%M:%S'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://mindvelopers.com/jquery.countdown.min.js"></script>

<div id="clock"></div>

My problem is that I need to add +21 hours to each event (to the result), but I cannot add the way this function is done.

javascript jquery

2 answers

3


To add hours to the result you can use new Date.

You can directly use the new Date() in the first parameter of countdown in a format more recognised by the Date.parse like the ISO 8601, read on http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15.

But if you want to keep the format of string to facilitate without needing to pass a more complex parameter (like ISO for example) then you can use your string combined with split and new Date(ano, mês[, dia[, hora[, minutos[, segundos[, milesegundos]]]]]);:

    var endIn = '2015/02/16';
    var sumHours = 21;//Soma 21 horas

    var endInV = endIn.split("/");
    var withSum = new Date(endInV[0], endInV[1] - 1, endInV[2]);
    withSum.setHours(withSum.getHours() + sumHours);

    $('#clock').countdown(withSum, function(event) {
        $(this).html(event.strftime('%D dias %H:%M:%S'));
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://mindvelopers.com/jquery.countdown.min.js"></script>

<div id="clock"></div>

  • It’s actually not working properly on that code. The date this for 2015/02/15, and the result is saying 6 days ... and also not counting down.

  • That’s exactly what I wanted! Perfect. Thanks for your help!

  • @Guilhermenascimento +1. Because you split to create the date?

  • 1

    Why did I use the split to create the date instead of new Date(2015, 2, 15)? For two reasons, first to facilitate the user’s adaptation regarding the use of the format 0000/00/00 and why new Date(2015, 2, 15) would be equal to "15 March 2015" (the correct is February, therefore 2 should have a -1), something else in some browsers/engines to pass direct string as you did in your example new Date ('2015/02/16'); is not a pattern of ISO. Thanks for asking :)

  • @Guilhermenascimento Thanks for the comment =D. I tried to do what you said and the result came out a little different from what is in the answers. See here. Would the output of this example not be correct?

  • @Qmechanic73 The examples were very good, but they are still more complex for users with less experience to understand. But deserves +1, mainly by example with ISO :)

Show 1 more comment

1

It can also be done like this:

var data1 = new Date ('2015/02/16');
var data2 = new Date (data1);
var addHoras = 21;
data2.setHours ( data1.getHours() + addHoras);

$('#clock').countdown(data2, function(event) {
    $(this).html(event.strftime('%D dias %H:%M:%S'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mindvelopers.com/jquery.countdown.min.js"></script>

<div id="clock"></div>

Fiddle

Example following the format of ISO 8601:

var data1 = new Date ('2015-02-16T02:00:00.000Z');
var data2 = new Date (data1);
var addHoras = 21;
data2.setHours ( data1.getHours() + addHoras);

$('#clock').countdown(data2, function(event) {
    $(this).html(event.strftime('%D dias %H:%M:%S'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mindvelopers.com/jquery.countdown.min.js"></script>

<div id="clock"></div>

Fiddle

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.