How to add current date with variable date

Asked

Viewed 69 times

-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>&nbsp;&nbsp;:&nbsp;&nbsp;<br/>
					<span class="countdown_legend">Days</span>
				</span>

				<span>
					<span class="hours">00</span>&nbsp;&nbsp;:&nbsp;&nbsp;<br/>
					<span class="countdown_legend">Hrs</span>
				</span>

				<span>
					<span class="minutes">00</span>&nbsp;&nbsp;:&nbsp;&nbsp;<br/>
					<span class="countdown_legend">Min</span>
				</span>

				<span>
					<span class="seconds">00</span><br/>
					<span class="countdown_legend">Seg</span>
				</span>
			</div>
		</div>

1 answer

0


Javascript

//configure a data que finda a oferta aqui
var YY = 2018;
var MM = 04;
var DD = 30;
var HH = 08;
var MI = 06;
var SS = 30;
 function atualizaContador() {  var hoje = new Date();
  var futuro = new Date(YY,MM-1,DD,HH,MI,SS);
   var ss = parseInt((futuro - hoje) / 1000);
  var mm = parseInt(ss / 60);
  var hh = parseInt(mm / 60);
  var dd = parseInt(hh / 24);
   ss = ss - (mm * 60);
  mm = mm - (hh * 60);
  hh = hh - (dd * 24);
   var faltam = '';
  faltam += (dd && dd > 1) ? dd+' dias, ' : (dd==1 ? '1 dia, ' : '');
  faltam += (toString(hh).length) ? hh+' hr, ' : '';
  faltam += (toString(mm).length) ? mm+' min e ' : '';
  faltam += ss+' seg';
    if (dd+hh+mm+ss > 0)  {  document.getElementById('contador').innerHTML = faltam;
         setTimeout(atualizaContador,1000);
   } else {  document.getElementById('contador').innerHTML = 'OFERTA ACABOU!!!!';
   setTimeout(atualizaContador,1000);
   }
   }

window.onload = atualizaContador;
Oferta Acaba em: <span id="contador"></span>

  • 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 ?

  • 1

    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.

  • you’re right, thanks a lot ;)

Browser other questions tagged

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