4

ユーザーがテキスト領域のキーを押したときにカウントダウンを開始するタイピング テストを作成しようとしています。HTML で 1 分間のカウントダウン タイマーを表示して開始するには、if-else ループが役立つと思いましたが、そうではありません。

私が間違っていることとコードを修正する方法を教えてください。

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。

コメントの1つが言ったように、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) 間隔をクリアしますが、間隔を設定することはありません

2) seconds = seconds--, JavaScript の操作の順序が原因で、思ったとおりに動作しません。

私はあなたの JS を修正し、このコードペンで実用的なソリューションを持っています

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 に答える