实现的效果如下：

具体代码如下：

Html部分：

打字测试

打字测试

  • 错误

    0

  • 时间

    60s

  • 当前准确率%

    100

  • 打字速度

    30个/分

点击下放文本输入框开始打字！！！

重新开始

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': '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 += "

" + keyArray[i].key_name + "

";

} else if (keyArray[i].key_val == '9') {

template += "

" + keyArray[i].key_name + "

";

} else if (keyArray[i].key_val == '220') {

template += "

" + keyArray[i].key_name + "

";

} else if (keyArray[i].key_val == '20') {

template += "

" + keyArray[i].key_name + "

";

} else if (keyArray[i].key_val == '13') {

template += "

" + keyArray[i].key_name + "

";

} else if (keyArray[i].key_val == '16') {

template += "

" + keyArray[i].key_name + "

";

} else if (keyArray[i].key_val == '16') {

template += "

" + keyArray[i].key_name + "

";

} else if (keyArray[i].key_val == '17') {

template += "

" + keyArray[i].key_name + "

";

} else if (keyArray[i].key_val == '36') {

template += "

" + keyArray[i].key_name + "

";

}

else if (keyArray[i].key_val == '32') {

template += "

" + keyArray[i].key_name + "

";

}

else {

template += "

" + keyArray[i].key_name + "

";

}

}

// 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'

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

模拟计算机打字,JS实现电脑虚拟键盘打字测试相关推荐

  1. java弹出虚拟键盘_JS实现电脑虚拟键盘的操作

    本文实例为大家分享了JS实现电脑虚拟键盘的具体代码,供大家参考,具体内容如下 需求: 1.当输入框光标聚焦时,电脑虚拟键盘弹出 2.在输入框输入内容时,键盘跟着变化 具体实现代码如下: Html部分: ...

  2. 键盘调节台式计算机声音,键盘打字音效怎么设置 让键盘打字发出机械键盘声音方法...

    我们平时用电脑键盘打字,如果不是机械键盘,很难发出比较好听的声音,而且打大段的字也会略显无聊.如果想要给自己的电脑打字加上一些声音特效,比如机械键盘打字是的声音,是否能够实现呢?答案是肯定的.今天&q ...

  3. AI帮你靠“想象”打字：手机电脑软键盘也能盲打了，准确率能达到95%

    铜灵 发自 凹非寺 量子位 出品 | 公众号 QbitAI 有了机器学习,没有软键盘还能照样打字. 凭啥?凭想象. 来自韩国科学技术高级研究院在一项最新研究中,提出了一种完全靠想象的键盘:I-Keyb ...

  4. 苹果电脑虚拟键盘怎么打开

    很多用户在使用苹果电脑办公或是学习时,遇到键盘输入不方便的情况就会选择用虚拟键盘做演示,可是有些不熟悉小伙伴不清楚苹果虚拟键盘怎么打开,下面请看小编整理的图文教程吧! 1.打开系统偏好设置. 2.打开 ...

  5. 如何卡掉苹果电脑虚拟键盘？

    很多用户在使用苹果电脑办公或是学习时,遇到键盘输入不方便的情况就会选择用虚拟键盘做演示,可是有些不熟悉小伙伴不清楚苹果虚拟键盘怎么打开,下面请看小编整理的图文教程吧! 1.打开系统偏好设置. 2.打开 ...

  6. 手机虚拟摄像头_没键盘也能打字？三星展示最新虚拟键盘Selfie Type：是真的

    1月8日消息,三星在近日举行的2020 CES国际消费电子展上展示了虚拟键盘Selfie Type,它是一款全新的概念产品,由三星内部的创意实验室C-Lab研发,能够通过手机的前置摄像头来智能识别用户 ...

  7. 计算机打字失灵,window_Win10键盘失灵无法打字提示错误代码19该怎么办？，我电脑的键盘无法打字了，显 - phpStudy...

    Win10键盘失灵无法打字提示错误代码19该怎么办? 我电脑的键盘无法打字了,显示的错误详细信息是:由于其配置信息(注册表中的)不完整或已损坏,Windows 无法启动这个硬件设备.(代码19).如何 ...

  8. 安卓虚拟键盘_像科幻片里那样隔空打字，虚拟键盘会成为未来趋势吗？

    最极客最具极客精神的新媒体近日,Facebook Reality Labs为虚拟现实体验开发了一种名为"PinchType"的输入法.主要依靠手部追踪,将不同字母输入固定分配给特定 ...

  9. mysql打字看不见鼠标_电脑打字不显示怎么办？键盘不能打字不能正常输入怎么办？...

    有时候我们电脑如果感染病毒的话可能会影响我们的键盘不能使用,导致键盘不能输入密码,不能打字,但是自己的键盘又没有坏,下面小编就为大家分析下解决办法, 1.点击打开桌面开始菜单,找打运行选项打开,在弹出 ...

最新文章

  1. POJ 1556 The Doors （未完）
  2. Android App开发——添加APP启动界面
  3. Rancher前奏--配置Nexus
  4. Java IO流操作规律
  5. web.xml上下文配置
  6. properties文件的分类级别
  7. Collectors.mapping()
  8. 基于openpose的人体姿态识别部署详细过程
  9. 关于计算机中的编码问题: ASC2/ Unicode/ Utf-8
  10. 停机状态下的电磁流量计保养方法
  11. python爬取12306
  12. mac系统升级血泪史之根目录创建文件夹问题
  13. c语言找出成绩的最大,C语言 求每个学生、每门课的平均成绩并找出最大值
  14. 如何将数据从旧PC传输到新Mac
  15. TensorFlow-SSD测试代码梳理
  16. 零零散散之Java异常
  17. 2020-05-14
  18. 2022年高精度仪表放大器市场深度分析及发展研究预测报告
  19. wpf使某个控件失去焦点_WPF的TextBox的焦点获取与失去焦点的死循环解决方案
  20. Nat Methods｜一个快速搜索工具能让所有人都能进行蛋白质结构预测

热门文章

  1. Shiro 权限管理
  2. 维度数据建模的概念和术语
  3. Java面向对象之女朋友类
  4. Ubuntu删除多余内核
  5. 系统架构师设计培训心得之二——架构设计
  6. Java基础知识：线程池的种类（5种）
  7. uni-app封装自己常用的css样式-----自定义css的样式 (便于开发)-----原理简单
  8. 概率论笔记—一维随机变量及其分布
  9. 保护Excel表格的4种常用方法
  10. 安装打印机共享器（服务器）并用个人电脑连接进行打印