时钟中的 setInterval 不会触发

Question

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

我试过了

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>

Answer 1

您的当前时间根本没有更新，您需要做的就是将您当前的时间块移动到 calcTime() 函数中。

    let 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()
  }

此处打字错误：

secs = diff.getHours();

结果：

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


// 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() {
  let 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()
  }
  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.getSeconds();
  msecs = diff.getMilliseconds();

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

  return finalSend;

}

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


// UPDATE UI FUNCTION
function updateUI(data) {



  // 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() {
  updateUI(calcTime());
}


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>

因为你只要求让间隔工作，祝你的简单时钟好运！看起来很酷！

Answer 2

您的代码中有一些拼写错误。你也没有使用最新的时间。您不需要创建带有时间的新对象。你可以在你的 diff.

中使用 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/

时钟中的 setInterval 不会触发

setInterval in a clock doesn't fire

javascript

setinterval

clock