javascript - 项目完成后，如何停止其中一个计数计时器（例如 countup2）并显示完成前的经过时间？

Question

我在一页上运行多个计时器。我不确定如何在该特定项目完成时停止单个计时器，并且仍然显示计时器以显示完成所花费的总时间。

例如，如果 countup2 在 2019 年 1 月 5 日完成，那么正确的语法是什么/在哪里？

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>

标签： javascriptcountdown

Answer 1

我将查看Date API 以获取有关设置计时器的一些示例。