时间戳

首页 > 解决方案 > 如何让 setInterval 不像 for 循环

javascript - 如何让 setInterval 不像 for 循环

问题描述

所以这是我的秒表代码，它应该工作得很好，除非我测试它，它放弃了尝试实际计算时间，而是像在 for 循环中一样计数。您可以在这里亲自查看：

var currTime = 0
var origTime = 0
var timerFunc
var a = document.querySelector('#node1')
var i = 0
var md
var sd
var msd

function button1Action() {
  if (i === 0) {
    origTime = document.getElementById("time").value
    currTime = document.getElementById("time").value
    var b = a.cloneNode(true)
    b.id = 'node2'
    b.innerHTML = '<h1 id="text"></h1><button id="button1" class="button1" onclick="button1Action()">Start</button>&nbsp;<button id="button2" class="button2" onclick="button2Action()">Clear</button>'
    a.parentNode.replaceChild(b, a)
    let hd = Math.floor(currTime / 3600000)
    let m = Math.floor((currTime % 3600000) / 60000)
    let s = Math.floor((currTime % 60000) / 1000)
    let ms = Math.floor(currTime % 1000)
    if (m < 10) {
      md = `0${m}`
    } else {
      md = `${m}`
    }
    if (s < 10) {
      sd = `0${s}`
    } else {
      sd = `${s}`
    }
    if (ms < 10) {
      msd = `00${ms}`
    } else if (ms < 100) {
      msd = `0${ms}`
    } else {
      msd = `${ms}`
    }
    document.getElementById("text").innerHTML = `${hd}:${md}:${sd}.${msd}`
  } else if (i >= 1 && (i % 2) == 1) {
    timerFunc = setInterval(function() {
      currTime += 33
      let hd = Math.floor(currTime / 3600000)
      let m = Math.floor((currTime % 3600000) / 60000)
      let s = Math.floor((currTime % 60000) / 1000)
      let ms = Math.floor(currTime % 1000)
      if (m < 10) {
        md = `0${m}`
      } else {
        md = `${m}`
      }
      if (s < 10) {
        sd = `0${s}`
      } else {
        sd = `${s}`
      }
      if (ms < 10) {
        msd = `00${ms}`
      } else if (ms < 100) {
        msd = `0${ms}`
      } else {
        msd = `${ms}`
      }
      document.getElementById("text").innerHTML = `${hd}:${md}:${sd}.${msd}`
    }, 33)
    document.getElementById("button1").innerHTML = `Pause`
    document.getElementById("button1").style.backgroundColor = "#0000ff"
  } else if (i >= 1 && (i % 2) == 0) {
    clearInterval(timerFunc)
    document.getElementById("button1").innerHTML = `Cont..`
    document.getElementById("button1").style.backgroundColor = "#00ff00"
  } else {
    throw "Error: i must be a positive integer or 0"
  }
  i++
}

function button2Action() {
  clearInterval(timerFunc)
  currTime = origTime
  let hd = Math.floor(currTime / 3600000)
  let m = Math.floor((currTime % 3600000) / 60000)
  let s = Math.floor((currTime % 60000) / 1000)
  let ms = Math.floor(currTime % 1000)
  if (m < 10) {
    md = `0${m}`
  } else {
    md = `${m}`
  }
  if (s < 10) {
    sd = `0${s}`
  } else {
    sd = `${s}`
  }
  if (ms < 10) {
    msd = `00${ms}`
  } else if (ms < 100) {
    msd = `0${ms}`
  } else {
    msd = `${ms}`
  }
  document.getElementById("text").innerHTML = `${hd}:${md}:${sd}.${msd}`
  document.getElementById("button1").innerHTML = `Start`
  document.getElementById("button1").style.backgroundColor = "#00ff00"
  i = 1
}
.button1 {
  background-color: #00ff00;
  color: #999999;
}

.button2 {
  background-color: #ff0000;
  color: #eeeeee
}

.in1::placeholder {
  color: #000e;
}
<!DOCTYPE html>
<html>

<head>
  <title>Stopwatch</title>
</head>

<body id="node1">
  <input type="number" class="in1" id="time" placeholder="0" value="0">
  <br/><br/>
  <button class="button1" onclick="button1Action()">Set</button>
</body>

</html>

我不知道为什么会这样。你能帮我么？ <h1>Thank you!</h1>

PS 这可能只是一个播放代码问题，所以如果您没有发现任何问题，请在下方评论，我会联系支持人员。

标签： javascripthtml

解决方案

问题是您没有将输入解析为数字。因此，当您这样做时currTime += 33;，它是连接字符串而不是添加数字。parseInt()在将输入读入变量时使用。

var currTime = 0
var origTime = 0
var timerFunc
var a = document.querySelector('#node1')
var i = 0
var md
var sd
var msd
var freq = 33;

function button1Action() {
  if (i === 0) {
    origTime = parseInt(document.getElementById("time").value)
    currTime = parseInt(document.getElementById("time").value)
    var b = a.cloneNode(true)
    b.id = 'node2'
    b.innerHTML = '<h1 id="text"></h1><button id="button1" class="button1" onclick="button1Action()">Start</button>&nbsp;<button id="button2" class="button2" onclick="button2Action()">Clear</button>'
    a.parentNode.replaceChild(b, a)
    let hd = Math.floor(currTime / 3600000)
    let m = Math.floor((currTime % 3600000) / 60000)
    let s = Math.floor((currTime % 60000) / 1000)
    let ms = Math.floor(currTime % 1000)
    if (m < 10) {
      md = `0${m}`
    } else {
      md = `${m}`
    }
    if (s < 10) {
      sd = `0${s}`
    } else {
      sd = `${s}`
    }
    if (ms < 10) {
      msd = `00${ms}`
    } else if (ms < 100) {
      msd = `0${ms}`
    } else {
      msd = `${ms}`
    }
    document.getElementById("text").innerHTML = `${hd}:${md}:${sd}.${msd}`
  } else if (i >= 1 && (i % 2) == 1) {
    timerFunc = setInterval(function() {
      currTime += freq
      let hd = Math.floor(currTime / 3600000)
      let m = Math.floor((currTime % 3600000) / 60000)
      let s = Math.floor((currTime % 60000) / 1000)
      let ms = Math.floor(currTime % 1000)
      if (m < 10) {
        md = `0${m}`
      } else {
        md = `${m}`
      }
      if (s < 10) {
        sd = `0${s}`
      } else {
        sd = `${s}`
      }
      if (ms < 10) {
        msd = `00${ms}`
      } else if (ms < 100) {
        msd = `0${ms}`
      } else {
        msd = `${ms}`
      }
      document.getElementById("text").innerHTML = `${hd}:${md}:${sd}.${msd}`
    }, freq)
    document.getElementById("button1").innerHTML = `Pause`
    document.getElementById("button1").style.backgroundColor = "#0000ff"
  } else if (i >= 1 && (i % 2) == 0) {
    clearInterval(timerFunc)
    document.getElementById("button1").innerHTML = `Cont..`
    document.getElementById("button1").style.backgroundColor = "#00ff00"
  } else {
    throw "Error: i must be a positive integer or 0"
  }
  i++
}

function button2Action() {
  clearInterval(timerFunc)
  currTime = origTime
  let hd = Math.floor(currTime / 3600000)
  let m = Math.floor((currTime % 3600000) / 60000)
  let s = Math.floor((currTime % 60000) / 1000)
  let ms = Math.floor(currTime % 1000)
  if (m < 10) {
    md = `0${m}`
  } else {
    md = `${m}`
  }
  if (s < 10) {
    sd = `0${s}`
  } else {
    sd = `${s}`
  }
  if (ms < 10) {
    msd = `00${ms}`
  } else if (ms < 100) {
    msd = `0${ms}`
  } else {
    msd = `${ms}`
  }
  document.getElementById("text").innerHTML = `${hd}:${md}:${sd}.${msd}`
  document.getElementById("button1").innerHTML = `Start`
  document.getElementById("button1").style.backgroundColor = "#00ff00"
  i = 1
}
.button1 {
  background-color: #00ff00;
  color: #999999;
}

.button2 {
  background-color: #ff0000;
  color: #eeeeee
}

.in1::placeholder {
  color: #000e;
}
<!DOCTYPE html>
<html>

<head>
  <title>Stopwatch</title>
</head>

<body id="node1">
  <input type="number" class="in1" id="time" placeholder="0" value="0">
  <br/><br/>
  <button class="button1" onclick="button1Action()">Set</button>
</body>

</html>

推荐阅读