JS實現電腦虛擬鍵盤打字測試
阿新 • • 發佈：2020-06-28
這篇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%;
/* height: 440px; */
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;
/* 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: 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;
/* top: 50%;
left: 50%;
transform: translate(-50%,-50%); */
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;
/* padding-top: 17px; */
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;
/* border: 1px solid black; */
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.錯誤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";
}
keyboard.js:
var keyArray = [
{ 'key_name': '`','key_val': '192' },{ 'key_name': '1','key_val': '49' },{ 'key_name': '2','key_val': '50' },{ 'key_name': '3','key_val': '51' },{ 'key_name': '4','key_val': '52' },{ 'key_name': '5','key_val': '53' },{ 'key_name': '6','key_val': '54' },{ 'key_name': '7','key_val': '55' },{ 'key_name': '8','key_val': '56' },{ 'key_name': '9','key_val': '57' },{ 'key_name': '0','key_val': '48' },{ 'key_name': '-','key_val': '189' },{ 'key_name': '=','key_val': '187' },{ 'key_name': 'Backspace','key_val': '8' },{ 'key_name': 'Tab','key_val': '9' },{ 'key_name': 'Q','key_val': '81' },{ 'key_name': 'W','key_val': '87' },{ 'key_name': 'E','key_val': '69' },{ 'key_name': 'R','key_val': '82' },{ 'key_name': 'T','key_val': '84' },{ 'key_name': 'Y','key_val': '89' },{ 'key_name': 'U','key_val': '85' },{ 'key_name': 'I','key_val': '73' },{ 'key_name': 'O','key_val': '79' },{ 'key_name': 'P','key_val': '80' },{ 'key_name': '[','key_val': '219' },{ 'key_name': ']','key_val': '221' },{ 'key_name': "\\ ",'key_val': '220' },{ 'key_name': 'CapsLock','key_val': '20' },{ 'key_name': 'A','key_val': '65' },{ 'key_name': 'S','key_val': '83' },{ 'key_name': 'D','key_val': '68' },{ 'key_name': 'F','key_val': '70' },{ 'key_name': 'G','key_val': '71' },{ 'key_name': 'H','key_val': '72' },{ 'key_name': 'J','key_val': '74' },{ 'key_name': 'K','key_val': '75' },{ 'key_name': 'L','key_val': '76' },{ 'key_name': ';','key_val': '186' },{ 'key_name': "'",'key_val': '222' },{ 'key_name': 'Enter','key_val': '13' },{ 'key_name': 'Shift','key_val': '16' },{ 'key_name': 'Z','key_val': '90' },{ 'key_name': 'X','key_val': '88' },{ 'key_name': 'C','key_val': '67' },{ 'key_name': 'V','key_val': '86' },{ 'key_name': 'B','key_val': '66' },{ 'key_name': 'N','key_val': '78' },{ 'key_name': 'M','key_val': '77' },{ 'key_name': ',','key_val': '188' },{ 'key_name': '.','key_val': '190' },{ 'key_name': '/','key_val': '191' },{ 'key_name': 'Ctrl','key_val': '17' },{ 'key_name': 'Alt','key_val': '18' },{ 'key_name': 'Home','key_val': '36 ' },{ 'key_name': 'Space','key_val': '32' },'key_val': '36' },{ 'key_name': 'Fn','key_val': '00' },]
var keyBoard = document.getElementsByClassName('keyBoard')[0]
function renderKeyBoard(keyArray) {
var template = '';
for (var i = 0; i < keyArray.length; i++) {
if (keyArray[i].key_val == '8') {
template += "<div class='key backspace' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
} else if (keyArray[i].key_val == '9') {
template += "<div class='key tab' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
} else if (keyArray[i].key_val == '220') {
template += "<div class='key backslash' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
} else if (keyArray[i].key_val == '20') {
template += "<div class='key capslock' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
} else if (keyArray[i].key_val == '13') {
template += "<div class='key enter' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
} else if (keyArray[i].key_val == '16') {
template += "<div class='key leftshift' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
} else if (keyArray[i].key_val == '16') {
template += "<div class='key rightshift' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
} else if (keyArray[i].key_val == '17') {
template += "<div class='key leftctrl' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
} else if (keyArray[i].key_val == '36') {
template += "<div class='key microsoft' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
}
else if (keyArray[i].key_val == '32') {
template += "<div class='key space' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
}
else {
template += "<div class='key' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
}
}
// console.log(template)
keyBoard.innerHTML = template;
}
renderKeyBoard(keyArray)
var key_div = document.getElementsByClassName('key');
// console.log(key_div)
$("#textarea_box").on("input",function (e) {
// console.log(e.keyCode)
keyBoard.style.display = 'grid'
processCurrentText()
});
$("#textarea_box").on("focus",function (e) {
// console.log(e.keyCode)
keyBoard.style.display = 'grid';
startGame();
});
$("#textarea_box").on("keydown",function (e) {
console.log(e.target.value)
if(e.target.value != ''){
for (var i = 0; i < key_div.length; i++) {
var key_val = Number(key_div[i].getAttribute('data-key'));
if (key_val === e.keyCode) {
key_div[i].style.color = '#fff';
key_div[i].style.backgroundColor = '#9F79EE'
} else {
key_div[i].style.color = ''
key_div[i].style.backgroundColor = ''
}
}
}
});
$("#textarea_box").on("keyup",function (e) {
for (var i = 0; i < key_div.length; i++) {
key_div[i].style.color = ''
key_div[i].style.backgroundColor = ''
}
});
$("#textarea_box").on("blur",function (e) {
// console.log(e.keyCode)
keyBoard.style.display = 'none'
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。