一段时间以来,我一直在尝试完成一个打字测试网站,我被困在如何添加每分钟一个单词的计数器上。我尝试了多种方法,但都不起作用。我想要它做的是在用户输入正确的提示后每分钟给出单词。代码如下:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<h1>
<span id="word-1">man</span> <span id="word-2">become</span> <span id="word-3">as</span>
<span id="word-4">and</span> <span id="word-5">through</span> <span id="word-6">find</span> <span id="word-7">would</span> <span id="word-8">here</span> <span id="word-9">and</span> <span id="word-10">before</span>
</h1>
<input type="text" id="boch">
</div>
<div id="typing-area">
<button id="bocho" onclick="document.getElementById('boch').value = ''">Enter</button>
</html>
<script src="main.js"></script>
JavaScript:
var input = document.getElementById("boch");
input.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("bocho").click();
}
});
var element = document.querySelector("#boch");
element.onkeyup = function () {
var value = element.value;
if (value.includes("man")) {
document.getElementById('word-1').style.backgroundColor = 'green';
} else {
document.getElementById('word-1').style.backgroundColor = 'transparent';
}
if (value.includes("man become")) {
document.getElementById('word-2').style.backgroundColor = 'green';
} else {
document.getElementById('word-2').style.backgroundColor = 'transparent';
}
if (value.includes("man become as")) {
document.getElementById('word-3').style.backgroundColor = 'green';
} else {
document.getElementById('word-3').style.backgroundColor = 'transparent';
}
if (value.includes("man become as and")) {
document.getElementById('word-4').style.backgroundColor = 'green';
} else {
document.getElementById('word-4').style.backgroundColor = 'transparent';
}
if (value.includes("man become as and through")) {
document.getElementById('word-5').style.backgroundColor = 'green';
} else {
document.getElementById('word-5').style.backgroundColor = 'transparent';
}
if (value.includes("man become as and through find")) {
document.getElementById('word-6').style.backgroundColor = 'green';
} else {
document.getElementById('word-6').style.backgroundColor = 'transparent';
}
if (value.includes("man become as and through find would")) {
document.getElementById('word-7').style.backgroundColor = 'green';
} else {
document.getElementById('word-7').style.backgroundColor = 'transparent';
}
if (value.includes("man become as and through find would here")) {
document.getElementById('word-8').style.backgroundColor = 'green';
} else {
document.getElementById('word-8').style.backgroundColor = 'transparent';
}
if (value.includes("man become as and through find would here and")) {
document.getElementById('word-9').style.backgroundColor = 'green';
} else {
document.getElementById('word-9').style.backgroundColor = 'transparent';
}
if (value.includes("man become as and through find would here and before")) {
document.getElementById('word-10').style.backgroundColor = 'green';
} else {
document.getElementById('word-10').style.backgroundColor = 'transparent';
}
}
let tagArr = document.getElementsByTagName("input");
for (let i = 0; i < tagArr.length; i++) {
tagArr[i].autocomplete = 'off';
}
谢谢你的帮助!
Irfan
发布于 2021-01-23 08:56:46
当第一次按下某个键时,您可以尝试将当前时间戳存储在变量中。然后,当用户完成时,获取当前时间戳与开始时存储的时间戳之间的差值。接下来,您必须计算经过的时间,并将其转换为每分钟的字数。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now
为了避免多个if-else结构,可以用空格拆分字符串,然后在for循环中逐字比较。
const string = "man become as and through find would here and before";
var text = document.getElementById("text");
var input = document.getElementById("input");
var start = null;
var finished = false;
// Split the string to an array of words
var words = string.split(" ");
text.innerHTML = "";
// For each word, add it as a span element in the text
words.forEach(w => {
let el = document.createElement("span");
el.innerText = w;
text.appendChild(el);
text.innerHTML += " ";
});
input.addEventListener("keyup", () => {
// Split the input to an array of words
let input_words = input.value.split(" ");
let good = true;
if (finished)
return;
if (!start)
start = Date.now();
// Iterate over all the words
for (let i = 0; i < words.length; i++) {
let element = words[i];
// If the word is not the same as the word at same position in the input, set 'good' at false
if (input_words[i] != element)
good = false;
// Set the background color for the word, selecting the element
// by the parent's children index (corresponding to i) to avoid the usage of ids
text.children[i].style.backgroundColor = good ? "green" : null;
}
// If all words are correct, the variable is still true
if (good)
{
finished = true;
// Get the difference in seonds between start and now
let elapsed = (Date.now() - start) / 1000;
// Get words per seconde
let words_per_seconde = words.length * 60 / elapsed;
// Round to the fourth decimal
words_per_seconde = Math.round(words_per_seconde * 1000) / 1000;
alert(words_per_seconde + " words per minute.");
}
});
<h1 id="text"></h1>
<input type="text" autocomplete="off" id="input"/>
发布于 2021-01-23 09:07:43
考虑下面的例子。
$(function() {
var start, end, elapsed;
function split(str) {
return str.split(" ");
}
function compWords(a, b) {
$.each(a, function(i, w) {
console.log(w, b.eq(i).text());
if (w == b.eq(i).text()) {
$(".word").eq(i).removeClass("incorrect").addClass("correct");
} else {
$(".word").eq(i).removeClass("correct").addClass("incorrect");
}
});
}
function showTime(ms) {
var minutes = Math.floor(ms / 60000);
var seconds = ((ms % 60000) / 1000).toFixed(0);
var result = minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
var wordLength = $(".word").length
alert(result + " to type " + wordLength + " words. " + $(".word.correct").length + " correct. " + Math.round(wordLength * 60 / seconds) + " WPM");
}
$("#boch").keydown(function(e) {
if ($(this).val().length == 1) {
start = Date.now();
$(".word").removeClass("correct incorrect");
}
}).keyup(function(e) {
var typed = $(this).val();
compWords(split(typed), $(".word"));
});
$("#bocho").click(function() {
if (start != undefined) {
end = Date.now();
elapsed = end - start;
showTime(elapsed);
}
});
$("#typing-area form").submit(function(e) {
e.preventDefault();
$("#bocho").click();
});
});
.word {
padding: .025em;
}
.word.correct {
background-color: #cfc;
}
.word.incorrect {
background-color: #fcc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
<span class="word">man</span> <span class="word">become</span> <span class="word">as</span>
<span class="word">and</span> <span class="word">through</span> <span class="word">find</span> <span class="word">would</span> <span class="word">here</span> <span class="word">and</span> <span class="word">before</span>
</h1>
<div id="typing-area">
<form>
<input type="text" id="boch" autocomplete="off" />
<button id="bocho">Enter</button>
</form>
</div>
这需要类似的代码,并向您展示如何计算用户键入单词所需的时间。它不会计算WPM,因为单词太少了。你可以考虑外推这个比率。字数* 60 /秒。
此答案使用jQuery。如果你愿意,你也可以使用JavaScript来做这件事。
https://stackoverflow.com/questions/65854300
复制相似问题