Question

我希望能够同时按下空格键和向左箭头键，并使计时器启动十秒钟。如果用户停止按该键，则计时器也应停止，并且结果应被取消。我已经尝试使用clearInterval（）方法。

function startTimer(duration, display) {
  var timer = duration;
  var minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      window.open('1.html', '_self')
    }
  }, 1000);
}

var start = timeFunction = function() {
  var fiveMinutes = 1 * 10;
  var display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};

var timesdown = 0;

document.addEventListener('keypress', function(event) {
  if (event.code == 'Space' && 'LeftArrow') {
    if (timesdown == 0) {
      start();
      timesdown = 1;
    }
  }
});

document.addEventListener('keyup', function(event) {
  if (event.code == 'Space' && 'LeftArrow') {
    timesdown = 0
    clearInterval(startTimer);
  }
});

<div id="time"></div>

当我按下键时，计时器会继续尝试重新启动，但是当我提起计时器时，计时器会继续计数。

Answer 1

clearInterval()方法清除由setInterval()方法设置的计时器。您将需要引用setInterval来清除间隔。我将setInterval分配给一个变量，然后使用该变量清除Interval。

var timeInterval;

function startTimer(duration, display) {
  var timer = duration;
  var minutes, seconds;
  timeInterval = setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      window.open('1.html', '_self')
    }
  }, 1000);
}

var start = timeFunction = function() {
  var fiveMinutes = 1 * 10;
  var display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};

var timesdown = 0;

document.addEventListener('keypress', function(event) {
  if (event.code == 'Space' && 'LeftArrow') {
    if (timesdown == 0) {
      start();
      timesdown = 1;
    }
  }
});

document.addEventListener('keyup', function(event) {
  if (event.code == 'Space' && 'LeftArrow') {
    timesdown = 0
    clearInterval(timeInterval);
  }
});

<div id="time"></div>

Answer 2

您的代码有几个问题。首先，您使用的是keypress而不是keydown，而keypress不会检测到箭头键。

您也遇到了event.code错误。是ArrowLeft，而不是LeftArrow。

事件一次也只能处理一个。 event.code不能同时是'Space'和'LeftArrow'。 event.code是一个变量！

由于事件一次只能处理一个，因此您需要额外的逻辑来捕获该状态。

下面的代码是一个有效的示例，可以纠正上述所有问题。

var intervalID = false;
var spaceDown = false;
var arrowDown = false;
var spaceUp = false;
var arrowUp = false;

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
          
  intervalID = setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      console.log("window.open('1.html', '_self')");
    }
  }, 1000);
}


var start = timeFunction = function() {
  var fiveMinutes = 1 * 10,
    display = document.querySelector('#time');
    
  startTimer(fiveMinutes, display);
};

var timesdown = 0

document.addEventListener('keydown', function(event) {
  
  if (event.code == 'Space') {
    spaceDown = true;
    spaceUp = false;
  }

  if (event.code == 'ArrowLeft') {
    arrowDown = true;
    arrowUp = false;
  }

  if (spaceDown && arrowDown) {
    if (timesdown == 0) {
      start();
      timesdown = 1;
    }
  }
});

document.addEventListener('keyup', function(event) {

  if (event.code == 'Space') {
    spaceDown = false;
    spaceUp = true;
  }

  if (event.code == 'ArrowLeft') {
    arrowDown = false;
    arrowUp = true;
  }

  if (spaceUp && arrowUp) {
    timesdown = 0;
    clearInterval(intervalID);
  }
});

<html>

<body>
  <div id="time"></div>
</body>

</html>

如何在按下按键时启动计时器并在按下按键时停止？

2 个答案: