#javascript #jquery
#javascript #jquery
Вопрос:
Я пытаюсь создать простой таймер обратного отсчета, который преобразует время, указанное на странице, в обратный отсчет.
Это работает, но моя текущая проблема заключается в том, как отображается обычная дата, а затем она анализируется JavaScript. Я хочу, чтобы он был проанализирован JS сразу, чтобы пользователь не видел, как он переключается между датой и таймером обратного отсчета.
Он преобразует это в обратный отсчет:
<span class="countdown">12/10/20 13:10:00</span>
Это код:
if ($('.countdown').length)
{
$.each( $('.countdown'), function( key, value )
{
var time_listed = $(value).text();
var countdown_object = $(value);
// Set the date we're counting down to
var countDownDate = new Date(time_listed).getTime();
// Update the count down every 1 second
var x = setInterval(function()
{
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
countdown_object.text (days " days " hours "h "
minutes "m " seconds "s ");
// If the count down is finished, write some text
if (distance < 0)
{
clearInterval(x);
countdown_object.text("EXPIRED");
}
}, 1000);
});
}
То, о чем я прошу, — это предложения о том, как обойти эту проблему. Это единственный способ загрузить его до HTML или что? Я запутался в рекомендациях для этого. Везде мне говорят отложить загрузку JavaScript…но как насчет подобных вещей, которые меняют содержимое?
В подобных случаях неплохо ли иметь «основной» файл для содержимого, изменяющего содержимое, который загружается сразу, а затем остальное после содержимого или что?
Комментарии:
1. Совсем не ясно, в чем здесь конкретная проблема
2. ваш код работает… так в чем же проблема?
3. Объяснил немного больше в редактировании.
4. Не показывайте обратный отсчет (например, используйте
display: none, чтобы скрыть его), а показывайте его только тогда, когда код инициализирован и готов начать обратный отсчет.5. На самом деле это не решает проблему, тогда это ничего, а затем внезапно что-то появится.
Ответ №1:
Проблемы возникают из-за того, что setInterval не выполняется автоматически, что нормально. Вот способ обойти это:
if ($('.countdown').length)
{
$.each( $('.countdown'), function( key, value )
{
var time_listed = $(value).text();
var countdown_object = $(value);
// Set the date we're counting down to
var countDownDate = new Date(time_listed).getTime();
var counterFunction = function()
{
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
countdown_object.text (days " days " hours "h "
minutes "m " seconds "s ");
// If the count down is finished, write some text
if (distance < 0)
{
clearInterval(x);
countdown_object.text("EXPIRED");
}
return counterFunction;
}
// Update the count down every 1 second
var x = setInterval(counterFunction(), 1000);
});
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="countdown">12/10/20 13:10:00</span> Комментарии:
1. Бум! Именно так и было, теперь это происходит практически мгновенно, возможно, за вычетом нескольких миллисекунд при получении свежего JS. Как только он находится в кэше, он выглядит мгновенно. В чем именно заключалась проблема, спасибо!
Ответ №2:
Я предлагаю поместить дату в data-date attr, например:
<span data-date="12/10/20 13:10:00" class="countdown"></span>
чем скрипт:
if ($('.countdown').length)
{
$.each( $('.countdown'), function( key, value )
{
var time_listed = $(value).attr("data-date");
var countdown_object = $(value);
// Set the date we're counting down to
var countDownDate = new Date(time_listed).getTime();
// Update the count down every 1 second
var x = setInterval(function()
{
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
countdown_object.text (days " days " hours "h "
minutes "m " seconds "s ");
// If the count down is finished, write some text
if (distance < 0)
{
clearInterval(x);
countdown_object.text("EXPIRED");
}
}, 1000);
});
}