Question

我的方案应开始计算时间,从今天到用户在投入领域抽出的时间计算剩下的时间。

www.un.org/Depts/DGACM/index_spanish.htm 虽然该方案用正确的时间更新了超文本,但问题始于我试图每秒更新计时。由于某种原因,它恢复了NaN的数值。为什么?

我在此提出以下意见:

const input = document.querySelector( input )
let timeInterval;
let timeStop;


input.addEventListener( change , (e) => {
    e.preventDefault()
    timeStop = true;
    endTime = Date.parse(e.target.value)
    updateHTML(endTime)
})


function updateHTML(endTime) {
  let time = calculateTimeDiff(endTime)
  if (time.total <= 0) {
    timeStop = false;
  }
  for (let pro in time) {
    let el = document.querySelector(`.${pro}`)
    if (el) {
      el.innerHTML = time[pro];
    }
  }
  updateCounter();
}


function updateCounter () {
  if (timeStop) {
    timeInterval = setInterval(updateHTML, 1000);
  } else {
    clearInterval(timeInterval);
  }
}

//returning time remaining till date in object form 
function calculateTimeDiff(endTime) {
  let start = Date.now();
  let end = endTime;
  let t = (end-start);
  let seconds = Math.floor((t / 1000) % 60);
  let minutes = Math.floor((t / 1000 / 60) % 60);
  let hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  let days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    total: t,
    days: days,
    hours: hours,
    minutes: minutes,
    seconds: seconds
  }
}

Answer 1

因此,你的代码是细微的,但问题在于您的<代码>endtime。在您的<代码>Interval中,请在update Rainbow/code>上填写,但无参数endtime,从而产生错误,因为其tt 字眼是指该段。



您可以简单地更新<条码>更新功能,接受这一功能,将其作为一个参数,并转至<条码>。

function updateCounter (endTime) {
  if (timeStop) {
    timeInterval=setInterval(() => updateHTML(endTime), 1000)
  } else {
    clearInterval(timeInterval)
  }
}


http://www.un.org/Depts/DGACM/index_chinese.htm

或,删除<代码>过时,作为附件,从<代码>updateHtml上删除,使之成为全球变量:

const input=document.querySelector( input )
let timeInterval;
let timeStop;
let endTime;


input.addEventListener( change , (e)=> {
  e.preventDefault()
  timeStop=true;
  endTime=Date.parse(e.target.value)
  updateHTML()
})


function updateHTML () {
  let time=calculateTimeDiff(endTime)
  if (time.total<=0) {
    timeStop=false
  }
  for (let pro in time) {
    let el=document.querySelector(`.${pro}`)
    if (el) {
      el.innerHTML=time[pro]
    }
  }
  updateCounter()
}


etc...

Answer 2

活动更新后,一律罚款。

但后来,您使用的是time Interval=setInterval(更新的超文本,1000) - 和updatehexachloro 。 <>在未计数的情况下执行的植被”。改用实际日期,工作

Working example:

const input = document.querySelector( input )
let timeInterval;
let timeStop;
let savedTime;

input.addEventListener( change , (e) => {
  e.preventDefault()
  timeStop = true;
  endTime = Date.parse(e.target.value)
  updateHTML(endTime)
})

function updateHTML(endTime) {
  savedTime = endTime || savedTime;
  let time = calculateTimeDiff(savedTime)
  if (time.total <= 0) {
    timeStop = false
  }
  for (let pro in time) {
    let el = document.querySelector(`.${pro}`)
    if (el) {
      el.innerHTML = time[pro]
    }
  }
  updateCounter()
}

function updateCounter() {
  if (timeStop) {
    timeInterval = setInterval(updateHTML, 1000)
  } else {
    clearInterval(timeInterval)
  }
}

//returning time remaining till date in object form 
function calculateTimeDiff(endTime) {
  let start = Date.now()
  let end = endTime
  let t = (end - start)
  let seconds = Math.floor((t / 1000) % 60);
  let minutes = Math.floor((t / 1000 / 60) % 60);
  let hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  let days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    total: t,
    days: days,
    hours: hours,
    minutes: minutes,
    seconds: seconds
  }
}

.time {
  display: inline-block;
  border-radius: 25%;
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <input type="date" name="endDate">
  <div class="clock">
    <div class="time"><span class="days">0</span> Days</div>
    <div class="time"><span class="hours">0</span> Hours</div>
    <div class="time"><span class="minutes">0</span> Minutes</div>
    <div class="time"><span class="seconds">0</span> Seconds</div>
  </div>


</body>

<script src="app.js"></script>

</html>

Answer 3

......

const input=document.querySelector( input )
let timeInterval;
let timeStop;
let endTime;

input.addEventListener( change , (e)=> {
  e.preventDefault()
  timeStop=true;
  endTime=Date.parse(e.target.value)
  updateHTML()
})


function updateHTML () {
  let time=calculateTimeDiff()
  if (time.total<=0) {
    timeStop=false
  }
  for (let pro in time) {
    let el=document.querySelector(`.${pro}`)
    if (el) {
      el.innerHTML=time[pro]
    }
  }
  updateCounter()
}


function updateCounter () {
  if (timeStop) {
    timeInterval=setInterval(updateHTML(), 1000)
  } else {
    clearInterval(timeInterval)
  }
}

//returning time remaining till date in object form 
function calculateTimeDiff () {
  let start=Date.now()
  let end=endTime
  let t=(end-start)
  let seconds = Math.floor((t / 1000) % 60);
  let minutes = Math.floor((t / 1000 / 60) % 60);
  let hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  let days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    total: t,
    days: days,
    hours: hours,
    minutes: minutes,
    seconds: seconds
  }
}

Answer 4

Just add preventDefault() in function updateCounter() in your code. Hope it will work. I tried and it worked successfully.

友情链接