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

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

0 голосов
/ 08 мая 2020

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

0 голосов
/ 08 мая 2020

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

<!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>
...