Javascript 如何遍历文本框中的文本？

我想做一个打字速度测试计数器。目标是仅在输入正确字符的情况下，在整个文本中移动闪烁的光标。我无法理解如何浏览课文。然后我将计算所用的分钟数并计算wpm

函数计时器（）{
var秒=3；
var元素=document.getElementById（'timer'）；
var timerId=设置间隔（倒计时，1000）；
函数倒计时（）{
如果（秒==-1）{
清除超时（timerId）；
element.innerHTML=“超时”；
var值=1；
wpm（）；
}否则{
element.innerHTML=“剩余时间：“+秒+”+“秒”；
秒--；
}
}
}

正文{
字体系列：monospace；
}
.页面标题>h1{
文本对齐：居中；
字体系列：monospace；
}
.第页标题{
背景色：#414a4c；
颜色：#ced3db；
}
琼伯伦先生{
保证金：0；
}
.导航栏{
背景色：#46494f；
}
a{
颜色：绿色；
}
.nav>li>a:悬停{
背景色：#878f9b；
}
.navbar nav>li{
文本对齐：居中；
浮动：无；
显示：表格单元格；
}
.导航栏导航{
显示：表格；
宽度：100%；
保证金：0；
}
navbar先生{
保证金：0；
填充：0；
边界半径：0；
}
.输入字段{
宽度：60em；
高度：8em；
背景色：#7e7e7f；
不透明度：0.4；
左侧边缘：15em；
边缘顶端：5em；
边框：3倍纯黑；
填充：0.8em；
}
#显示文本{
颜色：白色；
字号：2em；
}
.用户输入{
字号：1em；
左：35em；
垫面：2米；
}
#计时器{
垫顶：4em；
左：10em；
字号：1.5em；
颜色：红色；
}
.键入的光标{
不透明度：1；
-webkit动画：闪烁0.7秒无限；
-moz动画：闪烁0.7秒无限；
动画：闪烁0.7秒无限；
颜色：黑色；
}
@关键帧闪烁{
0% {
不透明度：1；
}
50% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-webkit关键帧闪烁{
0% {
不透明度：1；
}
50% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-moz关键帧闪烁{
0% {
不透明度：1；
}
50% {
不透明度：0；
}
100% {
不透明度：1；
}
}

打字计数器






开始
这是为了测试你的打字速度。所以你要像再也不会打字一样打字

如果要跟踪键入的字母，然后将其转换为不同的颜色，可以将文本字符串保存在变量中，并通过变量排队将键入的字母转储到另一个数组中，然后将它们合并到输出字段中：

let textToType=“这是我希望您键入的内容。”；
常量typedLetters=[]；
document.getElementById（“用户输入”）.addEventListener（“按键”，函数（事件）{
const key=event.which | | event.keyCode；
const nextLetter=textToType[0]。charCodeAt（）；
const outputTarget=document.getElementById（“显示文本”）；
const greenWrapper=document.createElement（“span”）；
greenWrapper.classList.add（“键入的游标”）；
如果（键===nextLetter）{
typedLetters.push（String.fromCharCode（nextLetter））；
textToType=textToType.substr（1）；
greenWrapper.textContent=typedLetters.join（“”）；
outputTarget.textContent=textToType；
输出目标预结束（绿色包装）；
};
})

正文{
字体系列：monospace；
}
.页面标题>h1{
文本对齐：居中；
字体系列：monospace；
}
.第页标题{
背景色：#414a4c；
颜色：#ced3db；
}
琼伯伦先生{
保证金：0；
}
.导航栏{
背景色：#46494f；
}
a{
颜色：绿色；
}
.nav>li>a:悬停{
背景色：#878f9b；
}
.navbar nav>li{
文本对齐：居中；
浮动：无；
显示：表格单元格；
}
.导航栏导航{
显示：表格；
宽度：100%；
保证金：0；
}
navbar先生{
保证金：0；
填充：0；
边界半径：0；
}
.输入字段{
宽度：60em；
高度：8em；
背景色：#7e7e7f；
不透明度：0.4；
左侧边缘：15em；
边缘顶端：5em；
边框：3倍纯黑；
填充：0.8em；
}
#显示文本{
颜色：白色；
字号：2em；
}
.用户输入{
字号：1em；
左：35em；
垫面：2米；
}
#计时器{
垫顶：4em；
左：10em；
字号：1.5em；
颜色：红色；
}
.键入的光标{
不透明度：1；
-webkit动画：闪烁0.7秒无限；
-moz动画：闪烁0.7秒无限；
动画：闪烁0.7秒无限；
颜色：黑色；
}
@关键帧闪烁{
0% {
不透明度：1；
}
50% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-webkit关键帧闪烁{
0% {
不透明度：1；
}
50% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-moz关键帧闪烁{
0% {
不透明度：1；
}
50% {
不透明度：0；
}
100% {
不透明度：1；
}
}

打字计数器






开始
这是我希望您键入的内容。

以下是我在玩了一点你的代码后得到的结果：

var display=document.getElementById（'display-text'）；
var userInput=document.getElementById（'user-input'）；
userInput.onkeyup=函数（）{
对于（var i=0；i

正文{
字体系列：monospace；
}
.输入字段{
宽度：自动；
/*为代码段修改*/
高度：自动；
/*为代码段修改*/
背景色：#7e7e7f；
不透明度：0.4；
左边距：0；
/*修改为