JS实现简单打字测试

2024-10-20 22:21:16

本文实例为大家分享了JS实现简单打字测试的具体代码，供大家参考，具体内容如下

需求：实现以下的功能

1.有三个小方块，分别用来当前输入的错误数量、打字的时间和当前的正确率。
2.下方是用来显示测试句子的容器。
3.最后是输入框

具体思路：

点击输入文本区域时，开始测试，会根据用户输入来统计当前的错误数和正确率，时间会减少。当输完整段句子时，会自动更新下一段句子。当时间为0时，游戏结束，文本框不能再输入，然后会统计打字速度。

具体代码如下：

Html部分

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="./index.css" >
 <title>打字测试</title>
</head>

<body>
 <div class="type_content">
 <h3>打字测试</h3>
 <ul class="type_box">
  <li class="error_box">
  <p class="error">错误</p>
  <p class="error_text">0</p>
  </li>
  <li class="time_box">
  <p style="margin: 10px;">时间</p>
  <p class="time_text">60s</p>
  </li>
  <li class="currcorrect_box">
  <p style="margin: 10px;">当前准确率%</p>
  <p class="currcorrect_text">100</p>
  </li>
  <li class="type_speed">
  <p style="margin: 10px;">打字速度</p>
  <p class="type_speed_text">30个/分</p>
  </li>
 </ul>
 <div class="text_box">点击下放文本输入框开始打字！！！</div>
 <div class="text_area">
 <textarea name="" id="textarea_box" placeholder="start typing here..."
 oninput="processCurrentText()"
 onfocus="startGame()"> </textarea>
 </div>
 <button class="restart" onclick="resetValues()">重新开始</button>
 </div>
 <script src="./index.js"></script>
</body>

</html>

CSS部分：

*{
 margin: 0;
 padding: 0;
}
.type_content{
 width: 60%;
 /* height: 440px; */
 border: 1px solid #ccccff;
 max-width: 600px;
 margin: 50px auto;
 border-radius: 8px;
 position: relative;
 min-width: 500px;
}
.type_content h3{
 text-align: center;
 margin: 10px 0px;
}
.type_box{
 list-style: none;
 width: 90%;
 height: 100px;
 /* border: 1px solid black; */
 margin: 0 auto;
 margin-bottom: 10px;
 display: flex;
 align-items: center;
 justify-content: space-around;
}
.type_box li{
 width: 88px;
 height: 88px;
 /* border: 1px solid black; */
 text-align: center;
 font-size: 16px;
 border-radius: 8px;
 /* color: #fff; */
}
.error_box{
 background-color: #ccffcc;
 color: red;
}
.time_box{
 background-color: #66ffff;
 color: #000033;
}
.currcorrect_box{
 background-color: #FFC125;
 color: #fff;
}
.type_speed{
 background-color: #FF4040;
 color: #fff;
 display: none;
}
.final_correct{
 background-color: #E3E3E3;
 color: #555555;
 display: none;
}
.error{
 margin: 10px;
}
.text_box{
 width: 80%;
 /* height: 50px; */
 margin: 20px auto 40px auto;
 /* border: 1px solid black; */
 background-color: #D1EEEE;
 color: #000;
 border-radius: 6px;
 /* text-align: center; */
 line-height: 40px;
 padding: 0px 5px;
 /* box-sizing: border-box; */
}
.text_area{
 width: 80%;
 height: 100px;
 margin: 0px auto;
 padding-bottom: 50px;
 margin-bottom: 30px;

}
#textarea_box{
 resize:none;
 width: 100%;
 height: 100%;
 padding: 6px 10px;
 font-size: 16px;
 border-radius: 6px;
 outline: none;
 border: none;
 border: 2px solid #eee;
}
.incorrect_char {
 color: red;
 text-decoration: underline;
 } 

 .correct_char {
 color: #9B30FF;
 }
 .restart{
 width: 120px;
 height: 40px;
 display: none;
 border: none;
 outline: none;
 cursor: pointer;
 color: #fff;
 background-color: #9900ff;
 border-radius: 6px;
 position: absolute;
 bottom: 10px;
 left: 50%;
 margin-left: -60px;

}

JS部分：

//定义测试时间
var testTime = 60;
//定义测试的句子
var testSentence = [
 "Push yourself, because no one else is going to do it for you.",
 "Failure is the condiment that gives success its flavor.",
 // "Wake up with determination. Go to bed with satisfaction.",
 // "It's going to be hard, but hard does not mean impossible.",
 // "Learning never exhausts the mind.",
 // "The only way to do great work is to love what you do."
]
//定义dom
//1.错误dom
var error_text = document.querySelector('.error_text');
//2.时间dom
var time_text = document.querySelector('.time_text');
//3.当前正确率
var currcorrect_text = document.querySelector('.currcorrect_text');
//4.打字速度
var type_speed_text = document.querySelector('.type_speed_text');

//打字速度父dom
var type_speed = document.querySelector('.type_speed');

//句子dom
var text_box = document.querySelector('.text_box');
//输入
var textarea_box = document.querySelector('#textarea_box');
//按钮
var restart = document.querySelector('.restart')
var timeLeft = testTime;
//当前句子
var currentSentence = "";
//默认开始是索引为0
var startIndex = 0;
//错误统计
var errors = 0;
var characterTyped = 0;
//总错误
var total_errors = 0;
var timer = null;
var timeElapsed = 0; //已用时间
var accuracy = 0;//正确个数
//更新渲染句子
function updateSentence(){
 text_box.textContent = null;
 currentSentence = testSentence[startIndex];
 //句子拆分
 var newChar = currentSentence.split('');
 for(var i = 0; i < newChar.length; i++){
 var charSpan = document.createElement('span');
 charSpan.innerText = newChar[i];
 text_box.appendChild(charSpan)
 }
 if(startIndex < testSentence.length - 1){
 startIndex++;
 }else{
 startIndex = 0
 }
}
//输入当前正确的句子
function processCurrentText(){
 curr_input = textarea_box.value;
 curr_input_array = curr_input.split('');
 // console.log(curr_input_array);
 characterTyped++;
 errors = 0;
 quoteSpanArray = text_box.querySelectorAll('span');
 // console.log(quoteSpanArray);
 quoteSpanArray.forEach((char,index)=>{
 var typeChar = curr_input_array[index];
 //当前没有输入
 if(typeChar == null){
  char.classList.remove('correct_char');
  char.classList.remove('incorrect_char');
 }else if(typeChar === char.innerText){
  //正确的输入
  char.classList.add('correct_char');
  char.classList.remove('incorrect_char');
 }else{
  //不正确的输入
  char.classList.add('incorrect_char');
  char.classList.remove('correct_char');
  errors++;
 }
 })
 error_text.textContent = total_errors + errors;
 console.log(characterTyped)
 console.log(error_text.textContent)
 var correctCharacters = (characterTyped - (total_errors + errors));
 var accuracyVal = ((correctCharacters / characterTyped) * 100);
 console.log(accuracyVal)
 currcorrect_text.textContent = Math.round(accuracyVal);
 //输入结束
 if(curr_input.length == currentSentence.length){
 updateSentence();
 total_errors += errors;
 textarea_box.value = ""
 }
}
//开始游戏
function startGame(){
 resetValues();
 updateSentence(); 

 // clear old and start a new timer
 clearInterval(timer);
 timer = setInterval(updateTimer, 1000);
}
//重新开始
function resetValues(){
 timeLeft = testTime;
 timeElapsed = 0;
 errors = 0;
 total_errors = 0;
 accuracy = 0;
 characterTyped = 0;
 startIndex = 0;
 textarea_box.disabled = false;
 textarea_box.value = "";
 text_box.textContent = 'Click on the area below to start the game.';
 currcorrect_text.textContent = 100;
 time_text.textContent = timeLeft + 's';
 type_speed.style.display = 'none';

}
//更新时间
function updateTimer() {
 if (timeLeft > 0) {
 // decrease the current time left
 timeLeft--; 

 // increase the time elapsed
 timeElapsed++; 

 // update the timer text
 time_text.textContent = timeLeft + "s";
 }
 else {
 // finish the game
 finishGame();
 }
 }
 //游戏结束
 function finishGame() {
 // stop the timer
 clearInterval(timer); 

 // disable the input area
 textarea_box.disabled = true; 

 // show finishing text
 text_box.textContent = "可点击下方按钮重新开始！！！"; 

 // display restart button
 restart.style.display = "block"; 

 // calculate cpm and wpm
 console.log(characterTyped,timeElapsed)
 cpm = Math.round(((characterTyped / timeElapsed) * 60)); 

 // update cpm and wpm text 

 type_speed_text.textContent = cpm + '个/分'; 

 // display the cpm and wpm
 type_speed.style.display = "block"; 

}

测试效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JS模拟键盘打字效果的方法

本文实例讲述了JS模拟键盘打字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS模拟实现软键盘及打字效果,点击软键盘年的字母键,文本框中即可显示文字,像是键盘打字的效果,美工不太好,没怎么美化,CSS高手可美化一下按钮,看上去还挺不错吧,我觉得. 先来看看运行效果图: 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb23
js实现键盘自动打字效果

最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,
仿打字特效的JS逐字出现的信息文字

逐字出现的信息文字 function makeArray() { this.length = makeArray.arguments.length for (var i = 0; i 3) y=0; document.form1.news2.value=' '; msg1 = fArray[y]; x=0; } document.form1.news2.value=msg1.substring(0,x); x+=1; setTimeout("newsFeed() ",200); } [
Js 打字效果逐一出现的文字

第一种:打印多个文字逐个出现的文字 var layers =document.layers,style=document.all,both=layers||style,idme=908601; if(layers){layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef = '.style';} function writeOnText(obj,str){ if(layers)wit
JavaScript打字小游戏代码

功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 1.定义全局变量 2.可选择英文字母出现个数 2.控制游戏时间函数 3.统计得分 3.动画效果 4.菜单选项 4.设定字母图片出现的时间 5.判断函数 6.游戏菜单 7.游戏时间选项 8.显示游戏时间 9.游戏难度选项 10.游戏得分先上效果图:(PS:美工是硬伤) 主要代码设计: 复制代码代码如下: //-------全局变量------- var data={ "10":["<img src='images
javascript 打字效果的文字特效

本节代码主要使用了 onMousedown 事件和 event.button 属性,主要功能和用法如下. • setTimeout 方法,在执行时是在载入后延迟指定时间后,去执行一次表达式,仅执行一次. • charAt 方法返回一个字符值,该字符位于指定索引位置.字符串中的第一个字符的索引为0,第二个的索引为1,等等.超出有效范围的索引值返回空字符串. 打字效果的文字特效 var layers = document.layers; var style = document.all; var b
javascript 打字游戏实现代码

效果如图所示:下面是核心代码复制代码代码如下: GAME = { //随机产生字母 randLetter: function() { var arrLetter = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K&qu
javascript实现自动输出文本（打字特效）

主要利用了setTimeout(),递归和String.substring(); 做出的效果就像是有一个打字员在打字. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name=&quo
JS实现的自动打字效果示例

本文实例讲述了JS实现的自动打字效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing</title> </head> <body> <div id='divTyping'></div> <script> var str = 'js 实现的打字效果,感
JS实现简单的键盘打字的效果

以代码形式实现过程分析: <html> <head> <title>打字效果</title> <meta http-equiv="Content-Type" Content="text/html;charset=gb2312" /> <style type="text/css"> body{ font-size:14px; font-color:#purple; font-w

JS实现简单打字测试

相关推荐

随机推荐