JS實(shí)現(xiàn)電腦虛擬鍵盤打字測試
更新時(shí)間：2020年06月24日 10:48:28 作者：Jeslie-He
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)電腦虛擬鍵盤打字測試，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
這篇blog主要是結(jié)合前面兩個(gè)知識點(diǎn)：JS實(shí)現(xiàn)電腦虛擬鍵盤的操作、JS實(shí)現(xiàn)簡單打字測試
實(shí)現(xiàn)的效果如下：
具體代碼如下：
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">錯(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..."> </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:
//定義測試時(shí)間
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.錯(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)前沒有輸入
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";
}
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': 'Shift', 'key_val': '16' },
{ '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_name': 'Home', 'key_val': '36' },
{ 'key_name': 'Alt', 'key_val': '18' },
{ 'key_name': 'Ctrl', 'key_val': '17' },
{ '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'
});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js性能優(yōu)化之?dāng)?shù)組模式實(shí)例詳解
這篇文章主要為大家介紹了js性能優(yōu)化之?dāng)?shù)組模式實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
解讀TypeScript與JavaScript的區(qū)別
這篇文章主要介紹了TypeScript與JavaScript的區(qū)別及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
three.js 利用uv和ThreeBSP制作一個(gè)快遞柜功能
這篇文章主要介紹了three.js 利用uv和ThreeBSP制作一個(gè)快遞柜,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
JavaScript修改css樣式style動(dòng)態(tài)改變元素樣式
修改css樣式style在某些情況下還是比較實(shí)用的，可以動(dòng)態(tài)改變一些樣式，接下來為大家介紹下使用JavaScript是如何做到的2013-12-12
Bootstrap 網(wǎng)格系統(tǒng)布局詳解
在平面設(shè)計(jì)中，網(wǎng)格是一種由一系列用于組織內(nèi)容的相交的直線（垂直的、水平的）組成的結(jié)構(gòu)（通常是二維的）。這篇文章主要介紹了Bootstrap 網(wǎng)格系統(tǒng)布局,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了JS中移除非數(shù)字最多保留一位小數(shù)的實(shí)現(xiàn)代碼，文章給大家提到了js處理數(shù)字保留2位小數(shù),強(qiáng)制保留2位小數(shù)不夠補(bǔ)上.00的完整代碼，感興趣的朋友一起看看吧2018-05-05
JavaScript對象屬性檢查、增加、刪除、訪問操作實(shí)例
這篇文章主要介紹了JavaScript對象屬性檢查、增加、刪除、訪問操作實(shí)例,本文分別給出代碼實(shí)例來講解如何給對象增加屬性、檢查屬性存在、以及刪除和訪問屬性,需要的朋友可以參考下2015-07-07
element-ui 上傳圖片后標(biāo)注坐標(biāo)點(diǎn)
有個(gè)組件庫的名稱叫做element-ui,基于Vue2.0開發(fā),提供了豐富的PC端組件，本文通過實(shí)例代碼給大家介紹element-ui 上傳圖片后標(biāo)注坐標(biāo)點(diǎn)的示例代碼，感興趣的朋友跟隨小編一起看看吧2021-07-07
轉(zhuǎn)換layUI的數(shù)據(jù)表格中的日期格式方法
今天小編就為大家分享一篇轉(zhuǎn)換layUI的數(shù)據(jù)表格中的日期格式方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js實(shí)現(xiàn)精確到秒的日期選擇器完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)精確到秒的日期選擇器,以完整實(shí)例形式分析了JavaScript日期選擇器的實(shí)現(xiàn)步驟與相關(guān)技巧,涉及JavaScript針對時(shí)間與日期的相關(guān)運(yùn)算,需要的朋友可以參考下2016-04-04