JS實現簡單打字測試
阿新 • • 發佈：2020-06-28
本文例項為大家分享了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";
}測試效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。