He creado una cuenta regresiva con la ayuda del complemento jQuery.countdown . El objetivo es contar desde la fecha actual hasta la Navidad de este año.
El resultado, como puede ver, está muy desviado. ¿Dónde está mi error?
function doCountDown(countDownContainer, endDate) { $(countDownContainer).countdown(endDate, function(event) { $(this).html(event.strftime('<ul class="list-unstyled clock">' + '<li class="days"><span>%-d</span><span>days</span></li> ' + '<li class="hrs"><span>%H</span><span>hours</span></li> ' + '<li class="mins"><span>%M</span><span>minutes</span></li> ' + '<li class="seconds"><span>%S</span><span>seconds</span></li></ul>')); }); } doCountDown('#count_down', '2021/12/25'); .clock { display: inline-flex; } .clock li { display: flex; flex-direction: column; justify-content: center; width: 58px; height: 58px; margin: 0 4px; font-weight: bold; color: #efefef; background: #343434; border-radius: 3px; } .clock li span { line-height: 1; } .clock li span:last-child { font-size: 10px; padding: 5px 0; text-transform: uppercase; } <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="conrainer"> <div class="text-center"> <h1 class="h4 my-3">Party starts in...</h1> <div id="count_down"></div> </div> </div>Si pudiera hacer una suposición basada en el ejemplo del complemento, creo que te estás perdiendo la cantidad de semanas. ¿Algo como esto?
'<li class="weeks"><span>%-w</span><span>weeks</span></li> 'Según la documentación, %-d en el formateador también tiene en cuenta el número de semanas restantes. Es decir, 6 semanas y 1 día sería solo '1 día' mostrado en %-d .
Para corregir esto, use %-D , que es el número total de días hasta la fecha de finalización:
function doCountDown(countDownContainer, endDate) { $(countDownContainer).countdown(endDate, function(event) { $(this).html(event.strftime('<ul class="list-unstyled clock">' + '<li class="days"><span>%-D</span><span>days</span></li> ' + '<li class="hrs"><span>%H</span><span>hours</span></li> ' + '<li class="mins"><span>%M</span><span>minutes</span></li> ' + '<li class="seconds"><span>%S</span><span>seconds</span></li></ul>')); }); } doCountDown('#count_down', '2021-12-25'); .clock { display: inline-flex; } .clock li { display: flex; flex-direction: column; justify-content: center; width: 58px; height: 58px; margin: 0 4px; font-weight: bold; color: #efefef; background: #343434; border-radius: 3px; } .clock li span { line-height: 1; } .clock li span:last-child { font-size: 10px; padding: 5px 0; text-transform: uppercase; } <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="conrainer"> <div class="text-center"> <h1 class="h4 my-3">Party starts in...</h1> <div id="count_down"></div> </div> </div>