我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
作为搞计算机的你，还不会盲打么？快来使用vue做一个打字训练器来练练你的手速吧，仅需两年半，你也会学会盲打哦。
成果展示
码上掘金
运行效果
初始化项目
如果你已经使用过【码上掘金】，可以跳过本段落，直接看下一段落【项目逻辑】
打开码上掘金(code.juejin.cn/)，选择【新建代码片段】【新建空白片段】来新建一个空白的项目。
新建完成后，由于是编写vue代码，所以点击Script右侧设置按钮，加入vue.js地址。
在添加依赖资源中，键入cdn.jsdelivr.net/npm/vue@2.6…即可。
如上，就已经初始化项目了，下面编写一个最简单的实例来测试一下。
如上，加入vue代码，在表达式地方，输入{{1+1}}，而后运行，若结果输出为2，则证明环境初始化完成。
项目逻辑
本段落仅介绍项目核心编写逻辑，不涉及代码部分，若想看代码部分的话，请直接调制下一段落。
项目最核心的点为根据范文而在下方的输入框内输入响应的文字，具体草图为：
整个项目都是围绕这个展开的，如果想要实现这些需求，那么需要解决的最核心问题是: 如何判断打字是否准确
其中如上三个需求中，最核心的时候，如何判断打字是否准确，对此，想到的方案是逐字对比，具体效果如下:
如何逐字对比呢？ 可以将范文和用户输入的字符理解为数组，直接根据下标去对比就可以了，例如:
范文数组的0——5 和 用户输入的 0——5 是相互匹配的，那就可以将已经完成了的，给染个绿色，而没有完成的，给染为红色即可。
页面编写
该打字训练器核心的部分都在vue中，前端涉及的比较简单，所以代码部分，不会过多介绍，来看下效果，整个页面分为几个部分，最上面是选择按钮，用于切换范文，而后是规定打字时间，接着便是开始测试按钮，最后是范文用用户输入框，整体效果如下:
如上需要注意的是，尽量不使用input框，因为它没法多行输入，最简单的办法是使用textarea框。
其中，还有一个点，需要注意一下，如项目逻辑所述，范文应该有2种颜色，用户输入匹配正确的为绿色，没有输入的为红色，所以这里需要定义一下，可以使用2个font标签来完成，例如:
只需要控制2个font的值，就可以来控制整个范文了。
vue编写
又到了喜闻乐见的环节了，来看下整个打字器的具体逻辑，其中涉及到的点我给列出来了：
- 根据用户输入控制范文
- 如何定义时间限制
- 切换范文
其中，根据用户输入控制范文，这个是属于第一类，而定义时间限制 和 切换范文 定义为第二类。
关于第二类，是有一个起始点的，那就是点击【开始测试】按钮后，所以需要再其按钮上绑定一个事件，例如:
<button @click="starts">开始测试</button>
接着来看starts方法。
starts() {
this.startd = true
this.enterCount = 0
this.modelTxt = ""
this.modelTxtOK = ""
this.isOver = ""
this.EnteredTxt = ""
this.modelTxtFailed = ""
this.modelTxt = this.txt[this.category1]
this.modelTxtFailed = this.txt[this.category1]
var timers = setInterval(() => {
clearInterval(timers) // 停止
this.startd = false
this.isOver = "本次打字已经结束"
},(this.category2 * 1000 * 60))
}
其中最上面初始化了一堆变量，而后又等待数分钟，其中变量startd是记录打字开始与否，enterCount是统计已经打了多少字，modelTxt是记录当前范文，modelTxtOK是记录当前已经输入正确的范文,modelTxtFailed是记录当前没有输入正确的范文，modelTxtFailed是用户输入的文字。
根据代码所述，最开始的时候是将当前范文全部赋值给modelTxtFailed，这是因为目前还未输入字符，所以均为错误的输入，而startd为true则代表打字已经开启，从代码中，不难看出，初始化的时候是true，而后等待设置的时间后，又将其修改为false，毫无疑问，这是打字的开关。
而后核心点是如何抓取用户的输入，好在vue给提供了方便的键盘事件keyup，将其绑定在输入框上，就可以执行响应分方法了，例如:
键盘事件绑定
<textarea v-model="EnteredTxt" @keyup="userInputs" id="inputTxt"></textarea>
其中对应的userInputs方法为：
userInputs(e) {
if (this.startd) {
for (let i=0;i<this.EnteredTxt.length;i++) {
if (this.EnteredTxt[i] == this.modelTxt[i]) {
this.enterCount = i+1
this.modelTxtOK = this.modelTxt.slice(0,this.enterCount)
this.modelTxtFailed = this.modelTxt.slice(this.enterCount,this.modelTxt.length)
} else {
break
}
}
}
}
如上代码非常简单，一开始的时候便是检测是否在规定时间内，若在规定时间内，就遍历用户输入的数据，从而去检查对应下标的范文数据，若能够匹配，则将打字数目增加1， 将该下标字体改为绿色，若遇到不一样的则失败，则退出循环，这样可以避免的地方如下:
下标为2的数据输入失败，哪怕后面下标为3、4、5输入成功，这时候也只会计算出2个正确输入的文字。
效果截图
开始
选择类型和时长，点击开始测试后
键入内容直至时间结束
如上我故意打错了字，将傅士打为傅土，从而后面输入的正确文字没有被统计上去。
总结
总体而言，使用vue写一个打字训练器，还是很满意的，唯一不满意的是，定义的键盘事件，当输入中文的时候，其中，所产生的拼音也会计入事件，从而引发方法的执行， 例如: 我们这两个字，使用拼音是women，所以键盘事件至少要执行5次才行，这个有点不好，总之，玩玩还是不错的，怎么样，好玩么？ 快来动动你的小手指试试吧。
