JS實(shí)現(xiàn)簡(jiǎn)單打字測(cè)試
本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)單打字測(cè)試的具體代碼,供大家參考,具體內(nèi)容如下
需求:實(shí)現(xiàn)以下的功能
1.有三個(gè)小方塊,分別用來(lái)當(dāng)前輸入的錯(cuò)誤數(shù)量、打字的時(shí)間和當(dāng)前的正確率。
2.下方是用來(lái)顯示測(cè)試句子的容器。
3.最后是輸入框
具體思路:
點(diǎn)擊輸入文本區(qū)域時(shí),開始測(cè)試,會(huì)根據(jù)用戶輸入來(lái)統(tǒng)計(jì)當(dāng)前的錯(cuò)誤數(shù)和正確率,時(shí)間會(huì)減少。當(dāng)輸完整段句子時(shí),會(huì)自動(dòng)更新下一段句子。當(dāng)時(shí)間為0時(shí),游戲結(jié)束,文本框不能再輸入,然后會(huì)統(tǒng)計(jì)打字速度。
具體代碼如下:
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>打字測(cè)試</title> </head> <body> <div class="type_content"> <h3>打字測(cè)試</h3> <ul class="type_box"> <li class="error_box"> <p class="error">錯(cuò)誤</p> <p class="error_text">0</p> </li> <li class="time_box"> <p style="margin: 10px;">時(shí)間</p> <p class="time_text">60s</p> </li> <li class="currcorrect_box"> <p style="margin: 10px;">當(dāng)前準(zhǔn)確率%</p> <p class="currcorrect_text">100</p> </li> <li class="type_speed"> <p style="margin: 10px;">打字速度</p> <p class="type_speed_text">30個(gè)/分</p> </li> </ul> <div class="text_box">點(diǎn)擊下放文本輸入框開始打字?。?!</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部分:
//定義測(cè)試時(shí)間 var testTime = 60; //定義測(cè)試的句子 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.錯(cuò)誤dom var error_text = document.querySelector('.error_text'); //2.時(shí)間dom var time_text = document.querySelector('.time_text'); //3.當(dāng)前正確率 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; //當(dāng)前句子 var currentSentence = ""; //默認(rèn)開始是索引為0 var startIndex = 0; //錯(cuò)誤統(tǒng)計(jì) var errors = 0; var characterTyped = 0; //總錯(cuò)誤 var total_errors = 0; var timer = null; var timeElapsed = 0; //已用時(shí)間 var accuracy = 0;//正確個(gè)數(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 } } //輸入當(dāng)前正確的句子 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]; //當(dāng)前沒(méi)有輸入 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); //輸入結(jié)束 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'; } //更新時(shí)間 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(); } } //游戲結(jié)束 function finishGame() { // stop the timer clearInterval(timer); // disable the input area textarea_box.disabled = true; // show finishing text text_box.textContent = "可點(diǎn)擊下方按鈕重新開始?。?!"; // 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 + '個(gè)/分'; // display the cpm and wpm type_speed.style.display = "block"; }
測(cè)試效果圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)長(zhǎng)按 識(shí)別圖片二維碼(兩種方案)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)長(zhǎng)按 識(shí)別圖片二維碼(兩種方案),第一種方案只需要在image里面加一個(gè)屬性就可以了,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01js 剪切板應(yīng)用clipboardData詳細(xì)解析
本篇文章主要介紹了js剪切板應(yīng)用clipboardData。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12javascript通過(guò)獲取html標(biāo)簽屬性class實(shí)現(xiàn)多選項(xiàng)卡的方法
這篇文章主要介紹了javascript通過(guò)獲取html標(biāo)簽屬性class實(shí)現(xiàn)多選項(xiàng)卡的方法,涉及javascript針對(duì)頁(yè)面元素屬性與事件的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07詳解微信小程序之scroll-view的flex布局問(wèn)題
這篇文章主要介紹了詳解微信小程序之scroll-view的flex布局問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01基于JS實(shí)現(xiàn)操作成功之后自動(dòng)跳轉(zhuǎn)頁(yè)面
這篇文章主要介紹了基于JS實(shí)現(xiàn)操作成功之后自動(dòng)跳轉(zhuǎn)頁(yè)面的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09網(wǎng)易JS面試題與Javascript詞法作用域說(shuō)明
Javascript函數(shù)在定義它們的作用域里運(yùn)行,而不是在執(zhí)行它們的作用域里運(yùn)行。2010-11-11