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);
});
});
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>