4

我正在尝试构建一个打字测试，当用户在文本区域中按下一个键时开始倒计时。我认为 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;
4

5 回答 5

5

您的代码中有很多语法错误。您需要使用setInterval函数来启动函数的连续调用。更重要的是，

var seconds = 1000 * 60; //1000 = 1 second in JS
var min = seconds * 60;

这些计算是另一个问题。

1000 * 60意思是60 seconds，所以seconds * 60给你60 minutes。

就像其中一条评论所说，there are syntax errors all over the place.。您需要更深入地了解使用 JavaScript 进行编码。

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

function myFunction() {
   textarea.removeEventListener("keypress", myFunction);
   if(seconds == 60000)
     timer = setInterval(myFunction, 1000)
   seconds -= 1000;
   document.getElementById("timer").innerHTML = '0:' + seconds/1000;
   if (seconds <= 0) {
       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/1000;
<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>

于 2016-02-09T18:40:45.473 回答
5

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

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

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";
于 2016-02-09T18:51:29.937 回答
1

我重写了您的代码，我认为它会尝试您的需求：

Javascript：

var seconds = 0, stop = 60, counterStarted = false, counter;
function myFunction(){
if(counterStarted === false){
counterStarted = true;
counter = setInterval(function(){
    if(seconds <= stop){
    document.getElementById('timer').innerHTML = seconds;
    seconds++;
  }else{
 document.getElementById('textarea').setAttribute("disabled", "disabled");
        clearInterval(counter);
        counterStarted = false;
        seconds = 0;
      }
    },1000)
  }
}

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..." onkeypress="myFunction()"></textarea>

JsFiddle 示例

于 2016-02-09T18:49:22.110 回答
0

我为您整理了一个小解决方案：

JavaScript： 

    var textarea = document.getElementById("textarea").onkeypress = function(){
        myFunction()
    }
    var totalTime = 10
    var currentTime = totalTime
    var firstTap = true
    var timer = null

    function myFunction() {
        if (firstTap == true){
            firstTap = false
            timer = setInterval(function(){
                currentTime--
                document.getElementById("timer").innerHTML = currentTime;
                if (currentTime < 0){
                    currentTime = totalTime
                    document.getElementById("timer").innerHTML = currentTime;
                    clearInterval(timer);
                    alert("You type X WPM");
                    firstTap = true
                }
            }, 1000)
        }
    }

    document.getElementById("timer").innerHTML = currentTime

我更改的主要内容是您需要存储计时器，并让您的时间间隔回调更新您的计时器显示，而不是myFunction(). 想想看，因为你有代码，你的“计时器”div只会在你输入时更新。无论用户在做什么，如果它是一个计时器，您都希望它更新。

我放了一些基本的门控逻辑来检测它是否是你的第一次击键，这样你就不会启动计时器 1000 次，我只是在警报出现时重置它。我还将总时间存储在顶部，您可以将其设置为您想要的任何值。因为我不想等待一分钟，所以我测试了 10 秒，但你可以将它移动到任何你想要的地方。

于 2016-02-09T18:42:58.010 回答
0

我以完全不同的方式做到了这一点，因为有很多语法错误并且无论如何都无法正常工作，请参阅小提琴：https ://jsfiddle.net/rtza7nm0/

  var counter = 0;

  function startTimer(duration, display) {
    var timer = duration,
      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) {
        alert("You type " + counter + " WPM");
        timer = duration;
      }
    }, 1000);
  }

  function myFunction() {
    if (counter == 0) {
      var oneMinute = 60,
        display = document.querySelector('#timer');
      startTimer(oneMinute, display);
      counter++;
    } else {
      counter++;
    }
  };
于 2016-02-09T18:48:24.050 回答