JS实现简单打字测试


Posted in Javascript onJune 24, 2020

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

需求:实现以下的功能

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实现简单打字测试

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中判断控件是否存在
Aug 25 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
JavaScript实现分页效果
Mar 28 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 #Javascript
JS实现电脑虚拟键盘的操作
Jun 24 #Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 #Javascript
js实现html滑动图片拼图验证
Jun 24 #Javascript
微信小程序的引导页实现代码
Jun 24 #Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 #Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 #Javascript
You might like
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
python中zip()方法应用实例分析
2016/04/16 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
秘书英文求职信范文
2014/01/31 职场文书
追悼会主持词
2014/03/20 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
师范毕业生求职信
2014/07/11 职场文书
会计稽核岗位职责
2015/04/13 职场文书
领导欢送会主持词
2015/07/06 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS