最近项目有个需求是实现一个测试打字速度的功能，效果类似如下网址所示：https://dazi.kukuw.com/
image.png
里面主要解决的功能点以及解决方法如下所示：
1.把一段文章，拆分成长度为每30个字为一组的数组，然后利用数组循环
created(){
let article= "网上打字测试，点开始之后可以开始打字，按下第一个键之后开始计时，" + "打字结束之后可以按计算速度计算你刚才打字的速度，下方同时显示错误的字数、经过的时间。" + "打错的字是红色显示，正确的是蓝色字，还没有打的是黑色。"
let trimArticle =article.replace(/\s+/g, "") //去掉文章中的间隙，这个很重要哦
this.strExample= this.chunkNewList(trimArticle,30)//每三十个文字为一组 chunkNewList为封装截取字符串的方法
},
把文章拆分成数组的方法
methods:{
chunkNewList(array, size){ //array需要拆分成数组的字符串，size拆分的长度
const length = array.length;
if (!length || !size || size < 1) {
//判断不是数组，或者size没有设置，size小于1，就返回空数组
return [];
}
//核心部分
let index = 0; //用来表示切割元素的范围start
let resIndex = 0; //用来递增表示输出数组的下标
//根据length和size算出输出数组的长度，并且创建它。
let result = new Array(Math.ceil(length / size));
//进行循环
while (index < length) {
//循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
result[resIndex++] = array.slice(index, (index += size));
}
//输出新数组
return result;
}
}
2.在页面上渲染每一行的文章和以及对应的文本框
data(){
return {
txtContent: [], //打字输入文本
strExample: [],//范文文本
timer: 0, //计时器
examinTime: 5,//每次测试时长
inputIndex：0，//当前获取焦点的input框
txtDisabled: false,//输入框是否被禁用
formData: {
costtime: 0, //当前打字花费的时间
errorCount: 0,//错误字数
correctCount: 0,//正确字数
speedTime: 0,//打字速度
backTime: 0,//退格次数
},
}
}
<div class="cen-box" ref="boxDom" id="downloadFormal">
<div :class="txtContent[index]||inputIndex === index?'cen-container':'bg-color cen-container'" onselectstart="return false" style="-moz-user-select:none;" v-for="(item,index) in strExample" :key="index">
<div class="cen-article">
<span :ref="'textColor'+index" v-for="(data,index1) in strExample[index]" :key="index1">{{data}}</span>
</div>
<el-input ref="areaDom" type="input"
:class="inputIndex === index?'in-border cen-textarea':'cen-textarea' "
v-model="txtContent[index]"
:disabled="(inputIndex!==index &&!txtContent[index])||disabledTxt"
@input="handleCode(index)"
@keyup.native.delete="deleteText(index)"
@paste.native.capture.prevent="handlePaste"
@keyup.enter.native="enterNext(index)"
></el-input>
</div>
</div>
一些常用的点击事件
A: @input="handleCode(index)" 用户每打一个字执行的事件
B: @keyup.native.delete="deleteText(index)"点击删除键执行的事件
C: @paste.native.capture.prevent="handlePaste" 禁止用户复制粘贴操作
D:@keyup.enter.native="enterNext(index)" 用户点击回车键
4.@input="handleCode(index)"
用户每打一个字执行的事件：会和原文章进行匹配，相同就是绿色通过，不相同就是红色
image.png
handleCode(index){
let errorCount = 0, correctCount = 0
let strExample = this.strExample[index] //当前这一行的文章例子
let txtContent = this.txtContent[index] //用户输入的文字
for (let a = 0; a < strExample.length; a++) {
if (a < txtContent.length) {
if (txtContent.slice(a, a + 1) === strExample.slice(a, a + 1)) { //输入的字匹配，正确
this.$refs['textColor' + index][a].style = "color:#05A28C" //字变成绿色
correctCount++
} else {//字不匹配，就错误
this.$refs['textColor' + index][a].style = "background-color:#E22121;color:#fff" //变成红色
errorCount++
}
}
}
}
网友评论