时间戳

首页 > 解决方案 > 时钟中的 setInterval 不会触发

javascript - 时钟中的 setInterval 不会触发

问题描述

我已经建立了一个简单的时钟，可以从过去的日期计数到当前的日期。但是设置的间隔不想运行和更新。

我努力了

setInterval(updater, 100);

和

setInterval(updater(), 100);

和

setInterval(function() {
    let difference = calcTime();
    updateUI(difference);
}, 100);

如果您想查看整个代码。它在这里： https ://jsfiddle.net/jgfeazdw/

let curr, cov, diff, year, month, date, hours, mins, secs, msecs, finalSend;

// SAVING CURRENT TIME
const currTime = {
  cyr: new Date().getFullYear(),
  cmnth: new Date().getMonth(),
  cdate: new Date().getDate(),
  chrs: new Date().getHours(),
  cmins: new Date().getMinutes(),
  csecs: new Date().getSeconds(),
  cmsecs: new Date().getMilliseconds()
}

// SAVING TIME FROM PAST
const coverTime = {
  cyr: 2019,
  cmnth: 4,
  cdate: 11,
  chrs: 00,
  cmins: 00,
  csecs: 00,
  cmsecs: 00
}

// CALCULATE TIME FUNCTION
function calcTime() {
  curr = new Date(currTime.cyr, currTime.cmnth, currTime.cdate, currTime.chrs, currTime.cmins, currTime.csecs, currTime.cmsecs);

  cov = new Date(coverTime.cyr, coverTime.cmnth, coverTime.cdate, coverTime.chrs, coverTime.cmins, coverTime.csecs, coverTime.cmsecs);

  diff = new Date(curr - cov);

  year = (diff / (1000 * 60 * 60 * 24 * 365)).toFixed();
  month = diff.getMonth();
  date = diff.getDate();
  hours = diff.getHours();
  mins = diff.getMinutes();
  secs = diff.getHours();
  msecs = diff.getMilliseconds();

  finalSend = {
    year: year,
    month: month,
    date: date,
    mins: mins,
    hours: hours,
    secs: secs,
    msecs: msecs
  }

  return finalSend;

}


// UPDATE UI FUNCTION
function updateUI(data) {

  // ADDS ZERO TO SINGLE DIGITS BEFORE ADDING TO UI
  function addZero(x) {
    if (x < 10) {
      x = '' + 0 + x;
      return x;
    } else {
      return x;
    }
  }

  // ADD UPDATED TIMES TO THE UI
  document.querySelector('.years').textContent = addZero(data.year);
  document.querySelector('.months').textContent = addZero(data.month);
  document.querySelector('.days').textContent = addZero(data.date);
  document.querySelector('.hours').textContent = addZero(data.hours);
  document.querySelector('.minutes').textContent = addZero(data.mins);
  document.querySelector('.seconds').textContent = addZero(data.secs);
  document.querySelector('.msecs').textContent = addZero(data.msecs);

}


function updater() {
  let difference = calcTime();
  updateUI(difference);
}


setInterval(updater, 100);
/*///////// BODY*/

body {
  background-image: linear-gradient(#292929, black);
  color: white;
  font-family: 'Krona One';
  size: 16px;
}


/*///////// WRAPPER */

.wrapper {
  width: 100vw;
  height: 100vh;
}


/*///////// MAINS */

.main {
  width: 75vw;
  height: 40vh;
  margin: auto;
  margin-top: 25vh;
}


/*///////// SUBS */

.textBox {
  font-size: 1rem;
}

.sub {
  font-size: .5rem;
  text-shadow: none;
  text-align: center;
}

.time {
  display: inline-block;
  text-align: center;
}

.timerBox {
  font-size: 1.5rem;
  margin: 1vw 0;
  text-shadow: 0px 12px 2px rgba(0, 0, 0, .4);
  display: grid;
  grid-template-columns: minmax(50px, 10%) minmax(20px, 5%) minmax(50px, 10%) minmax(20px, 5%) minmax(50px, 10%) minmax(20px, 5%) minmax(50px, 10%) minmax(20px, 5%) minmax(50px, 10%) minmax(20px, 5%) minmax(50px, 10%) minmax(20px, 5%) minmax(70px, 10%);
}
<div class="wrapper">
  <div class="main">
    <div class="timerBox">
      <div class="sub">
        YEARS
      </div>
      <div class="colon sub"></div>
      <div class="sub">
        MONTHS
      </div>
      <div class="colon sub"></div>
      <div class="sub">
        DAYS
      </div>
      <div class="colon sub"></div>
      <div class="sub">
        HOURS
      </div>
      <div class="colon sub"></div>
      <div class="sub">
        MINUTES
      </div>
      <div class="colon sub"></div>
      <div class="sub">
        SECONDS
      </div>
      <div class="colon sub"></div>
      <div class="sub time">
        MILLISECS.
      </div>

      <div class="years time">
        12
      </div>
      <div class="colon time">:</div>
      <div class="months time">
        48
      </div>
      <div class="colon time">:</div>
      <div class="days time">
        79
      </div>
      <div class="colon time">:</div>
      <div class="hours time">
        43
      </div>
      <div class="colon time">:</div>
      <div class="minutes time">
        80
      </div>
      <div class="colon time">:</div>
      <div class="seconds time">
        75
      </div>
      <div class="colon time">:</div>
      <div class="msecs time">
        100
      </div>
    </div>
  </div>
</div>

标签： javascriptsetintervalclock

解决方案

您的代码中有一些拼写错误。你也没有使用最新的时间。您不需要随时间创建新对象。你可以new Date()在你的差异中使用。

// SAVING TIME FROM PAST
const coverTime = {
  cyr: 2019,
  cmnth: 4,
  cdate: 11,
  chrs: 00,
  cmins: 00,
  csecs: 00,
  cmsecs: 00
}

// CALCULATE TIME FUNCTION
function calcTime() {
  const cov = new Date(coverTime.cyr, coverTime.cmnth, coverTime.cdate, coverTime.chrs, coverTime.cmins, coverTime.csecs, coverTime.cmsecs);

  const diff = new Date(new Date() - cov);
  const year = (diff / (1000 * 60 * 60 * 24 * 365)).toFixed();
  const month = diff.getMonth();
  const date = diff.getDate();
  const hours = diff.getHours();
  const mins = diff.getMinutes();
  const secs = diff.getSeconds();
  const msecs = diff.getMilliseconds();

  return {
    year,
    month,
    date,
    mins,
    hours,
    secs,
    msecs
  }

}

// CACHE ELEMENTS
const yearEl = document.querySelector('.years')
const months = document.querySelector('.months')
const daysEl = document.querySelector('.days')
const hoursEl = document.querySelector('.hours')
const minutesEl = document.querySelector('.minutes')
const secondsEl = document.querySelector('.seconds')
const msecsEl = document.querySelector('.msecs');

// UPDATE UI FUNCTION
function updateUI(data) {

  // ADDS ZERO TO SINGLE DIGITS BEFORE ADDING TO UI
  function addZero(x) {
    if (x < 10) {
      x = '' + 0 + x;
      return x;
    } else {
      return x;
    }
  }

  // ADD UPDATED TIMES TO THE UI
  yearEl.textContent = addZero(data.year);
  msecsEl.textContent = addZero(data.month);
  daysEl.textContent = addZero(data.date);
  hoursEl.textContent = addZero(data.hours);
  minutesEl.textContent = addZero(data.mins);
  secondsEl.textContent = addZero(data.secs);
  msecsEl.textContent = addZero(data.msecs);
}


function updater() {
  let difference = calcTime();
  updateUI(difference);
}


setInterval(updater, 100);

工作示例

https://jsfiddle.net/veoz0dng/13/

推荐阅读