1分钟倒计时Javascript

Rasheeda Alexander 发表于 Dev

拉希达·亚历山大（Rasheeda Alexander）

我正在尝试建立一个打字测试，当用户按下文本区域中的一个键时，该测试开始递减计数。我认为if-else循环将有助于显示和启动HTML中的1分钟倒数计时器，但事实并非如此。

请向我解释我在做什么错以及如何更正我的代码。

HTML：

<div id="timer"></div>
<p>Text for typing test will go here.</p>
<textarea id="textarea" rows="14" cols="150" placeholder="Start typing here...">
</textarea>`

JS：

var seconds=1000 * 60; //1000 = 1 second in JS
var min = seconds * 60;
var textarea = document.getElementById("textarea").onkeypress = function() { 
    myFunction()
};
//When a key is pressed in the text area, update the timer using myFunction

function myFunction() {
   document.getElementById("timer").innerHTML = 
     if (seconds>=0) {
         seconds = seconds--;
     } else {
         clearInterval("timer");
         alert("You type X WPM");
     }
} //If seconds are equal or greater than 0, countdown until 1 minute has passed
//Else, clear the timer and alert user of how many words they type per minute

document.getElementById("timer").innerHTML="0:" + seconds;

雅各布·彼得森

我注意到您的解决方案存在一些问题。

1）您清除了Interval，但从未设置过setInterval

2）seconds = seconds--，由于JavaScript中的操作顺序而没有按照您的想象做。

我修改了您的JS，并在此Codepen中找到了可行的解决方案

JS：

var seconds=60;
var timer;
function myFunction() {
  if(seconds < 60) { // I want it to say 1:00, not 60
    document.getElementById("timer").innerHTML = seconds;
  }
  if (seconds >0 ) { // so it doesn't go to -1
     seconds--;
  } else {
     clearInterval(timer);
     alert("You type X WPM");
  }
}
document.getElementById("textarea").onkeypress = function() {
  if(!timer) {
    timer = window.setInterval(function() { 
      myFunction();
    }, 1000); // every second
  }
} 

document.getElementById("timer").innerHTML="1:00";