JS實現(xiàn)簡單打字測試

更新時間：2020年06月24日 10:29:02 作者：Jeslie-He

這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡單打字測試，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)簡單打字測試的具體代碼，供大家參考，具體內(nèi)容如下

需求：實現(xiàn)以下的功能

1.有三個小方塊，分別用來當(dāng)前輸入的錯誤數(shù)量、打字的時間和當(dāng)前的正確率。
2.下方是用來顯示測試句子的容器。
3.最后是輸入框

具體思路：

點擊輸入文本區(qū)域時，開始測試，會根據(jù)用戶輸入來統(tǒng)計當(dāng)前的錯誤數(shù)和正確率，時間會減少。當(dāng)輸完整段句子時，會自動更新下一段句子。當(dāng)時間為0時，游戲結(jié)束，文本框不能再輸入，然后會統(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="./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;">當(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個/分</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.當(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;
//錯誤統(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
 }
}
//輸入當(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)前沒有輸入
 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';
 
}
//更新時間
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 = "可點擊下方按鈕重新開始！?。?; 
 
 // 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"; 
 
}

測試效果圖：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: