Implementation logic: set the timer to refresh once per second, how many times the timer refreshes to execute the word generation operation to determine the word generation speed, for example, the initial word generation speed is 1, then the timer refreshes 5 times to generate a word, each word Use span to install, and put 10 words in each group into div. Listen to the keyboard press event, and use a variable str to record the string of letters that are pressed continuously on the keyboard. When the string str contains the string in the span, the span turns red, and the score in the lower right corner increases by 1. When the string in the div When a row of spans turns red, delete the div from the body. If there are 3,500 words necessary for high school as a word library, a group of 10 words generated each time are randomly selected from it, the effect is even better, and it can not only practice typing but also be familiar with the spelling of words.
Above code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
span{
font-size: larger;
margin: 20px;
}
#score{
background-color: red;
color: white;
position: absolute;
left:90%;
top: 90%;
}
</style>
</head>
<span id="score">
0
</span>
<body>
<script>
var content = "";
var score = 0;
//这里可以使用固定单词
var words= ["apple","horizontal","vertical","vector","ghost","evil","banana","polo","curve","deploy"];
var str = '';
var count = 0;
//单词生成速度，可以根据当前得分来设置，得分越高速度越快，比如当得分大于200时速度设为2，大于300百是速度设为3
var speed = 1;
setInterval(()=>{
if(count%(6-speed)===0){
let divElement = document.createElement('div');
for (var i = 0; i <words.length ; i++) {
var rand = Math.floor(Math.random()*words.length);
var span = document.createElement('span');
span.innerText = words[rand];
divElement.appendChild(span);
document.body.appendChild(divElement);
}
}
count++;
},1000)
document.addEventListener("keydown",function (event) {
str+=event.key;
console.log(str);
var spans = document.getElementsByTagName('span');
var matchCnt = 0;
for (var i = 0; i <spans.length ; i++) {
if(str.includes(spans[i].innerText)){
spans[i].style.color = 'red'
score++;
matchCnt++;
}
}
if(matchCnt>0){
str = '';
}
document.getElementById('score').innerText = score;
//清除全部打出的一行
var divs = document.getElementsByTagName('div');
for (var i = 0; i <divs.length ; i++) {
var children = divs[i].children;
var redCnt = 0;
for (var j = 0; j <children.length ; j++) {
if(children[j].style.color === 'red'){
redCnt++;
}
}
if(redCnt===children.length){
document.body.removeChild(divs[i]);
}
}
});
</script>
</body>
</html>