Как остановить один из таймеров обратного отсчета (скажем, countup2) после завершения проекта и отобразить истекшее время до его завершения? - PullRequest
Новая
       17

Как остановить один из таймеров обратного отсчета (скажем, countup2) после завершения проекта и отобразить истекшее время до его завершения?

0 голосов
/ 13 января 2019

Я запускаю несколько таймеров на одной странице. Я не уверен, как остановить отдельный таймер, когда этот конкретный проект завершен, и все еще отображать таймер, показывающий общее время, которое потребовалось для завершения.

Например, если отсчет2 завершится 5 января 2019 г., какой / где будет правильный синтаксис? 

HTML

<div class="countup" id="countup1">
  <p class="days">00</p>
  <p class="timeRefDays">Days</p>
  <p class="hours">00</p>
  <p class="timeRefHours">hrs</p>
  <p class="minutes">00</p>
  <p class="timeRefMinutes">min</p>
  <p class="seconds">00</p>
  <p class="timeRefSeconds">sec</p>
</div>
<div class="countup" id="countup2">
  <p class="days">00</p>
  <p class="timeRefDays">Days</p>
  <p class="hours">00</p>
  <p class="timeRefHours">hrs</p>
  <p class="minutes">00</p>
  <p class="timeRefMinutes">min</p>
  <p class="seconds">00</p>
  <p class="timeRefSeconds">sec</p>
</div>
<div class="countup" id="countup3">
  <p class="days">00</p>
  <p class="timeRefDays">Days</p>
  <p class="hours">00</p>
  <p class="timeRefHours">hrs</p>
  <p class="minutes">00</p>
  <p class="timeRefMinutes">min</p>
  <p class="seconds">00</p>
  <p class="timeRefSeconds">sec</p>
</div>


<script>

/*
 * Basic Count Up from Date and Time
 */
window.onload = function() {
  // Month,Day,Year,Hour,Minute,Second
  upTime('jan,01,2018,00:00:00', 'countup1'); // ****** Change this line!
  upTime('dec,01,2018,10:10:10', 'countup2'); // ****** Change this line!
  upTime('dec,01,2018,10:10:10', 'countup3'); // ****** Change this line!

}

function upTime(countTo, id) {
  now = new Date();
  countTo = new Date(countTo);
  difference = (now - countTo);

  days = Math.floor(difference / (60 * 60 * 1000 * 24) * 1);
  hours = Math.floor((difference % (60 * 60 * 1000 * 24)) / (60 * 60 * 
1000) * 1);
  mins = Math.floor(((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 
1000)) / (60 * 1000) * 1);
  secs = Math.floor((((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 
1000)) % (60 * 1000)) / 1000 * 1);

  idEl = document.getElementById(id);
  idEl.getElementsByClassName('days')[0].innerHTML = days;
  idEl.getElementsByClassName('hours')[0].innerHTML = hours;
  idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
  idEl.getElementsByClassName('seconds')[0].innerHTML = secs;


  setInterval(function() {
    upTime(countTo, id);
  }, 1000);
}

</script>


<style>

.countup {
  text-align: center;
  font-family: verdana;
  font-size: 20px;
  font-weight: bold;

}

.countup p {
  display: inline-block;
  padding: 10px;
  background: #F94EEE;
  margin: 0 0 20px;
  border-radius: 3px;
  color: white;
  min-width: 2.6rem;
}

</style>

1 Ответ

0 голосов
/ 13 января 2019

Я бы взглянул на API Date для некоторых примеров настройки таймеров.

...