Question

我真的在这里使用所有示例JS计时器苦苦挣扎-当只有一些可用代码时，这一点有点难以理解。

我正在尝试计算当我按下一个键时，它是从30倒数到0，如果再次按下该键，它会执行相同的操作，那么它从30数到0（重置）

是否可以用Java脚本完成此操作，并且在HTML中仅使它显示从30到0的数字？没有其他文字吗？

我尝试使用其他示例，但是我认为我必须将脚本放到错误的位置：S是否有人可以给我提供一个示例，不仅是JS的示例，还可以是HTML标记的示例？非常感谢。

周杰伦

我一直尝试修改并使用的示例是-

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>

$(function(){

 var perc = 50 // User will be logged out after (minutes)
 var count = perc * 60;

 // RESET TIMER

$(document).keypress(function(){
    var count = perc * 60;   // PROBLEM
    alert('keypress works');
});  


 //COUNTDOWN

 var counter = setInterval(timer, 1000); 
    function timer() {
        count = count - 1;
        if (count == -1) {
            // LOGOUT //
            return;
        }

        var seconds = count % 60;
        var minutes = Math.floor(count / 60);

        seconds %= 60;
        minutes %= 60;

        document.getElementById("seconds").innerHTML = seconds;
        document.getElementById("minutes").innerHTML = minutes;
        document.getElementById("start_time").innerHTML = inactive;

    };

 });

</script>

</body>
</html>

Answer 1

这里有一些代码使您可以使用精彩的setInterval进行操作，该a few things you need to do每n毫秒（1000 ms = 1s）调用其参数函数。

请注意，setInterval并不完全准确，因此请考虑重构为requestAnimationFrame并稍后使用日期/时间库来探索JS计时的另一个领域。

let count;
let interval;
const timer = document.querySelector("#timer");

document.addEventListener("keydown", e => {
  if (e.keyCode === 88) { // x key
    clearInterval(interval);
    count = 0;
    interval = setInterval(e => {
      timer.innerText = count++;

      if (count > 30) {
        clearInterval(interval);
      }
    }, 1000);
  }
});

html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
}

#timer {
  font-size: 4em;
  font-family: cursive;
  margin: auto;
}

<div id="timer">press "x" key</div>

Javascript计时器-按键时重置计时器

1 个答案: