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 相关文章推荐
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
vuejs指令详解
2017/02/07 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
Python实现的随机森林算法与简单总结
2018/01/30 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python算法题 链表反转详解
2019/07/02 Python
python读取Excel表格文件的方法
2019/09/02 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
税务干部鉴定材料
2014/02/11 职场文书
公司委托书范本
2014/04/04 职场文书
精神文明单位申报材料
2014/05/02 职场文书
师德师风建设方案
2014/05/08 职场文书
绿色小区申报材料
2014/08/22 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
证婚人致辞精选
2015/07/28 职场文书