-1
I am with a Countdown, but without success, I could not get the date too, in this Countdown is only Hour, minutes and seconds, wanted for the Days too.
Code:
https://jsfiddle.net/nLuj6xrz/1/
$(function () {
setInterval(function () {
$('.countdown').each(function (index, value) {
var data = $(this).attr('data-expire').split(' ');
var date = data[0].split('-');
var hour = data[1].split(':');
var dateEnd = new Date(date[0], date[1] - 1, date[2], hour[0], hour[1], hour[2]);
var dateNow = new Date();
dateNow.setMilliseconds(0);
if (dateEnd.getTime() >= dateNow.getTime()) {
dateEnd.setDate(dateEnd.getDate() - dateNow.getDate());
dateEnd.setHours(dateEnd.getHours() - dateNow.getHours());
dateEnd.setMinutes(dateEnd.getMinutes() - dateNow.getMinutes());
dateEnd.setSeconds(dateEnd.getSeconds() - dateNow.getSeconds());
var setDate = dateEnd.getDate();
if (dateEnd.getDate().toString().length === 1) {
var setDate = '0' + dateEnd.getDate();
}
var setHours = dateEnd.getHours();
if (dateEnd.getHours().toString().length === 1) {
var setHours = '0' + dateEnd.getHours();
}
var setMinutes = dateEnd.getMinutes();
if (dateEnd.getMinutes().toString().length === 1) {
var setMinutes = '0' + dateEnd.getMinutes();
}
var setSeconds = dateEnd.getSeconds();
if (dateEnd.getSeconds().toString().length === 1) {
var setSeconds = '0' + dateEnd.getSeconds();
}
$(this).find('.days').html(setDate);
$(this).find('.hours').html(setHours);
$(this).find('.minutes').html(setMinutes);
$(this).find('.seconds').html(setSeconds);
} else {
location.reload();
}
});
}, '1000');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown" data-expire="2018-08-30 10:00:00">
<div>
<span>
Oferta<br/>
<span class="countdown_legend">Acaba em:</span>
</span>
</div>
<div>
<span>
<span class="days">00</span> : <br/>
<span class="countdown_legend">Days</span>
</span>
<span>
<span class="hours">00</span> : <br/>
<span class="countdown_legend">Hrs</span>
</span>
<span>
<span class="minutes">00</span> : <br/>
<span class="countdown_legend">Min</span>
</span>
<span>
<span class="seconds">00</span><br/>
<span class="countdown_legend">Seg</span>
</span>
</div>
</div>
Pretty cool @Leo, but then I’ll have to change all my html structure to use your rsrs code, not to do using my js code ?
– William Alvares
html posted in question makes it appear on very weird screen. The one of my answer is just a
span
and can apply a CSS to it to stay in the way.– user60252
you’re right, thanks a lot ;)
– William Alvares