作为搞计算机的你,还不会盲打么?快来使用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次才行,这个有点不好,总之,玩玩还是不错的,怎么样,好玩么? 快来动动你的小手指试试吧。