JS實現(xiàn)簡單打字測試
本文實例為大家分享了JS實現(xiàn)簡單打字測試的具體代碼，供大家參考，具體內容如下
需求：實現(xiàn)以下的功能
1.有三個小方塊，分別用來當前輸入的錯誤數(shù)量、打字的時間和當前的正確率。2.下方是用來顯示測試句子的容器。3.最后是輸入框
具體思路：
點擊輸入文本區(qū)域時，開始測試，會根據(jù)用戶輸入來統(tǒng)計當前的錯誤數(shù)和正確率，時間會減少。當輸完整段句子時，會自動更新下一段句子。當時間為0時，游戲結束，文本框不能再輸入，然后會統(tǒng)計打字速度。
具體代碼如下：
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='http://www.aoyou183.cn/bcjs/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='' placeholder='start typing here...' oninput='processCurrentText()' onfocus='startGame()'> </textarea> </div> <button onclick='resetValues()'>重新開始</button> </div> <script src='http://www.aoyou183.cn/bcjs/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.錯誤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;//錯誤統(tǒng)計var errors = 0;var characterTyped = 0;//總錯誤var total_errors = 0; var timer = null;var timeElapsed = 0; //已用時間var accuracy = 0;//正確個數(shù)//更新渲染句子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'; }
測試效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關文章：
1. Spring @Primary和@Qualifier注解原理解析2. SpringBoot+SpringCache實現(xiàn)兩級緩存(Redis+Caffeine)3. 詳解springBoot啟動時找不到或無法加載主類解決辦法4. 詳解php如何合并身份證正反面圖片為一張圖片5. Java基于redis和mysql實現(xiàn)簡單的秒殺(附demo)6. 專家預言：PHP將比Java更好更受歡迎7. java使用FFmpeg合成視頻和音頻并獲取視頻中的音頻等操作(實例代碼詳解)8. php設計模式之模板模式實例分析【星際爭霸游戲案例】9. ASP.NET MVC視圖頁使用jQuery傳遞異步數(shù)據(jù)的幾種方式詳解10. AJAX實現(xiàn)省市縣三級聯(lián)動效果
網(wǎng)公網(wǎng)安備