Проблема при уменьшении секунд в Day.js для таймера обратного отсчета (при попытке перехода с moment.js)

У меня есть рабочий код от кого-то о таймере обратного отсчета с использованием Moment.JS
-> [его код: https://codepen.io/javanigus/pen/KrMRvd ].
Я пытаюсь воспроизвести его с помощью Day.JS, можно сказать, я хочу перенести его с moment.js на day.js . Мне удалось перенести его до вычитания цели (дата + время) с текущей (дата + время). Он появляется в журнале консоли.
-> [мой код: https://codepen.io/justreadthis/pen/bGVvvXP ].
Но теперь я застрял, когда хочу вычесть последнюю часть кода за 1 секунду (следующий шаг заставит его постоянно вычитать, верно?). я пытаюсьconsole.log(dayjs.preciseDiff(duration, interval, true));со значением интервала, которое я установил на 1 секунду, он получит данные в NaN.

Кто-нибудь знает, как заставить работать? Я пытаюсь не использовать moment.js, так как хочу по возможности использовать day.js .
Спасибо
------------------------ редактировать ------------------------
мой текущий код javascript, который я сейчас застрял, дает значение NaN. отредактируйте снова, я поместил файл JS в HTML, чтобы его было легко увидеть отсюда, а не из кода. .

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs-plugin-utc"></script>
<script src="https://unpkg.com/dayjs-precise-range@1.0.1/precise-range.js"></script>
  <time></time>
<script>
  var eventTime, currentTime, interval, duration;

  dayjs.extend(dayjsPluginUTC.default);
  dayjs.extend(preciseDiff);
 interval = 1;

eventTime = dayjs('2020-05-15T07:59:50+00:00').format();
 // based on time set in user's computer time / OS
 currentTime = dayjs.utc().format();
 // get duration between two times
 duration = dayjs.preciseDiff(eventTime, currentTime ,true);
 console.log(dayjs.preciseDiff(duration, interval, true));

</script>

1 ответ

Надеюсь, это сработает для вас:

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
</style>
</head>
<body>

<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").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);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

</body>
</html>

Другие вопросы по тегам