我正在尝试构建一个打字测试,当用户按下文本区域中的键时,该测试开始倒计时。我认为 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)你清除间隔,但你从不设置间隔
2) 秒 = 秒--,由于 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";
您的代码中存在很多语法错误。您需要使用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>
我重写了你的代码,我认为它不符合你的需要:
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 示例
我为您整理了一个小解决方案:
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 秒,因为我不想等一分钟,但你可以把它移动到你想要的任何东西。
我以完全不同的方式执行此操作,因为语法错误太多,无论如何都无法正常工作,请参阅小提琴: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++;
}
};