Проблема при уменьшении секунд в 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>