Question

这是我的第一个项目，在3,2,1，Stream中按下“开始”按钮后，我试图进行倒计时！然后显示时间x和z在文档上被点击，但在“ Stream！”之后它显示未定义。好像我已经尽我所能尝试了一切，如果可以的话，谢谢！

var sec = ["3", "2", "1", "Stream!"];
var a = 0;
var xcount = 0;
var zcount = 0;
document.getElementById("myBtn").addEventListener("click", updatetimer);
document.addEventListener("keydown", keyPush);

function updatetimer() {
    var time = setInterval(timer, 1000, false);
}

function keyPush(evt) {
    switch (evt.keyCode) {
        case 88:
            xcount = xcount + 1;
            document.getElementById("demo").innerHTML = xcount;
            break;
        case 90:
            zcount = zcount + 1;
            document.getElementById("demo2").innerHTML = zcount;
            break;
    }
}

function timer() {
    var write = (document.getElementById("demo").innerHTML = sec[a]);
    a += 1;
    if (write === sec[3]) {
        clearInterval(time);
        return;
    }
}

<html>

  <input type="button" value="Start!" id="myBtn"/>
  <p id="demo"> </p>
  <p1 id ="demo2"> </p1>

</html>

Answer 1

time仅在updatetimer()范围内，您不能在其他地方使用它。将其放到全局中。

var sec = ["3", "2", "1", "Stream!"];
var a = 0;
var xcount = 0;
var zcount = 0;
document.getElementById('myBtn').addEventListener("click", updatetimer);
document.addEventListener("keydown", keyPush);

var time;    //declare the reference to the timer in global so that you can clear it in another function.

function updatetimer() {
    time = setInterval(timer, 1000, false);

}

function keyPush(evt) {
switch (evt.keyCode) {
case 88:
  xcount = xcount + 1;
  document.getElementById('demo').innerHTML= xcount;
  break;
 case 90:
  zcount = zcount + 1;
   document.getElementById('demo2').innerHTML= zcount;
  break;
 }
}

function timer() {
    var write = document.getElementById('demo').innerHTML = sec[a];
    a += 1;
    if (write === sec[3]) {
         clearInterval(time);
         return;
    }
}

Answer 2

function updatetimer() {
  var time = setInterval(timer, 1000, false);

}

时间仅限于updatetimer功能，无法清除。

Answer 3

您尚未定义变量time，因此未定义undefined消息。您可以这样做：

var time;

function updateTimer() {
    time = setInterval(timer, 1000, false);
}

此外，空的全局变量time意味着您可以在其他函数内部使用时间，而无需先将其重新定义为这些函数内部的本地时间。

Answer 4

您只需要在全局范围内声明timer变量。 w3schools这里有一个非常简单的示例。自己尝试。

var sec = ["3", "2", "1", "Stream!"];
var a = 0;
var xcount = 0;
var zcount = 0;
var timer;
document.getElementById("myBtn").addEventListener("click", updatetimer);
document.addEventListener("keydown", keyPush);

function updatetimer() {
    time = setInterval(timer, 1000, false);
}

function keyPush(evt) {
    switch (evt.keyCode) {
        case 88:
            xcount = xcount + 1;
            document.getElementById("xCount").innerHTML = xcount;
            break;
        case 90:
            zcount = zcount + 1;
            document.getElementById("zCount").innerHTML = zcount;
            break;
    }
}

function timer() {
    var write = (document.getElementById("countDown").innerHTML = sec[a]);
    a += 1;
    if (write === sec[3]) {
        clearInterval(time);
        return;
    }
}

<html>

  <input type="button" value="Start!" id="myBtn"/>
  <p id="countDown"> </p>
  <p>X count: <span id="xCount"> </span></p>
  <p>Z count: <span id ="zCount"> </span></p>

</html>

为了进一步澄清，我对您的代码做了一些修改。

数组完成后显示未定义

4 个答案: