JS实现电脑虚拟键盘打字测试

时间：2021-05-26

这篇blog主要是结合前面两个知识点：JS实现电脑虚拟键盘的操作、JS实现简单打字测试

实现的效果如下：

具体代码如下：

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" > <link rel="stylesheet" href="./keyBoard..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..."> </textarea> </div> <button class="restart" onclick="resetValues()">重新开始</button> </div> <div class="keyBoard"> </div> <script src="./jquery-1.11.0.min.js"></script> <script src="./index.js"></script> <script src="./keyBoard.js"></script></body></html>

index.css：

*{ margin: 0; padding: 0;}.type_content{ width: 60%; border: 1px solid #ccccff; max-width: 600px; margin: 10px 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; margin: 0 auto; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-around;}.type_box li{ width: 88px; height: 88px; text-align: center; font-size: 16px; border-radius: 8px; }.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%; margin: 20px auto 40px auto; background-color: #D1EEEE; color: #000; border-radius: 6px; line-height: 40px; padding: 0px 5px; }.text_area{ width: 80%; height: 50px; 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; }

keyboard.css:

/* body * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;} */.keyBoard{ max-width: 800px; padding: 20px; position: absolute; background-color: rgb(197, 197, 197); border-radius: 10px; display: none; grid-template-columns: repeat(30, 20px); grid-template-rows: repeat(5, 30px); grid-gap: 5px; margin-left: 20%;}.key { background-color: rgb(243, 243, 243); border: 2px solid black; border-radius: 5px; grid-column: span 2; font-size: 12px; text-align: center; cursor: pointer; line-height: 30px; font-weight: 700;}.key:hover { border: 1px solid #eeeeee; }.backspace { grid-column: span 4;}.tab { grid-column: span 3;}.backslash { grid-column: span 3;}.capslock { grid-column: span 4;}.enter { grid-column: span 4;}.leftshift { grid-column: span 5;}.rightshift { grid-column: span 5;}.leftctrl { grid-column: span 3;}.microsoft { grid-column: span 3; font-size: 14px; }.space { grid-column: span 13;}.input_box{ width: 400px; height: 60px; margin: auto; margin-top: 100px;}.input_box input{ outline: none; border: none; width: 100%; height: 100%; border: 2px solid #ccc; border-radius: 8px; padding: 10px; font-size: 30px;}

index.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.错误domvar error_text = document.querySelector('.error_text');//2.时间domvar time_text = document.querySelector('.time_text');//3.当前正确率var currcorrect_text = document.querySelector('.currcorrect_text');//4.打字速度var type_speed_text = document.querySelector('.type_speed_text');//打字速度父domvar type_speed = document.querySelector('.type_speed');//句子domvar text_box = document.querySelector('.text_box');//输入var textarea_box = document.querySelector('#textarea_box');//按钮var restart = document.querySelector('.restart')var timeLeft = testTime;//当前句子var currentSentence = "";//默认开始是索引为0var 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"; }

keyboard.js:

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

JS实现电脑虚拟键盘打字测试

相关文章

电脑虚拟键盘怎么打开?两种方式打开系统虚拟键盘功能

当电脑键盘坏掉时如何打开电脑软键盘?

JS实现电脑虚拟键盘的操作

iPad2怎么远程连接电脑

全新iPad支持siri吗