当前位置： 首页 > news >正文

JS+H5打字练习器

news 文章来源：https://blog.csdn.net/w11111xxxl/article/details/140881944 2025/1/11 16:58:30

实现功能

1.导入.TXT文件到打字练习内容（部分浏览器可能出于安全问题限制了这一步操作）
2.输入文本到打字练习内（弹出输入框，将要练习的内容输入至输入框）
3. 开始练习，并根据正误在打字练习内容文本上修改颜色（某个字正确显示绿色，某个字错误，显示红色，某个字没有打显示灰色）
4.开始练习、结束练习，全部输入完成后自动结束练习，也可提前手动结束练习，结束练习后弹窗用显示时和正确率。（区别在于一个全部输入完成且全部正确，一个提前结束无其他条件）

效果图

在这里插入图片描述在这里插入图片描述

分析

HTML 结构解析

  1. 根元素：<!DOCTYPE html> 声明文档类型为HTML。
  2. html 元素：包含整个页面的内容，并设置语言为中文（lang="zh-CN"）。
  3. head 元素：包含页面的元数据，如字符集（charset="UTF-8"）、视口设置（viewport）和标题（<title>）。
  4. style 元素：包含页面的CSS样式。
    • 设置页面背景颜色、字体、布局样式等。
  5. body 元素：包含页面的可见内容。
    • 使用Flexbox布局使内容居中。
  6. .container 类：包含文本输入框和按钮，并设置样式。
  7. .buttons 类：包含一组按钮，并设置布局样式。
  8. .text-to-type 类：包含待输入的文本，并设置样式。
  9. input 元素：一个文本输入框，用于用户输入。

JavaScript 解析

  1. 变量声明：

    • textToType：获取待输入文本的DOM元素。
    • inputText：获取用户输入文本的DOM元素。
    • importTextBtn、addTextBtn、startPracticeBtn、endPracticeBtn：获取按钮的DOM元素。
    • originalText：存储原始待输入的文本。
    • startTime：存储开始练习的时间。
    • alertCount：存储弹窗次数。
    • correctCount：存储正确的字符数。

  2. inputText 输入事件监听器：

    • 当用户在输入框中输入时，会触发此事件。
    • 获取用户当前输入的文本。
    • 初始化一个空字符串updatedText用于构建更新后的文本。
    • 如果startTime已设置，遍历原始文本和用户输入的文本：
      • 如果字符匹配，将字符标记为correct。
      • 如果字符不匹配，将字符标记为wrong。
    • 更新textToType的HTML内容。
    • 如果用户输入的文本与原始文本完全匹配，计算总用时和正确率，并通过弹窗显示结果。
    • 重置输入框和startTime。

  3. importTextBtn 点击事件监听器：

    • 创建一个文件输入元素，允许用户选择.txt文件。
    • 当文件被选中后，使用FileReader读取文件内容。
    • 读取完成后，将文本内容赋值给originalText并更新textToType。

  4. addTextBtn 点击事件监听器：

    • 弹出一个输入框让用户输入文本。
    • 如果用户输入了文本，将其赋值给originalText并更新textToType。

  5. startPracticeBtn 点击事件监听器：

    • 设置startTime为当前时间。
    • 清空输入框。
    • 更新textToType的HTML内容为原始文本。

  6. endPracticeBtn 点击事件监听器：

    • 如果startTime已设置，计算总用时和正确率，并通过弹窗显示结果。
    • 重置startTime和输入框。

完成源代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>打字练习</title><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {background-color: white;padding: 20px;border-radius: 15px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);max-width: 600px;width: 100%;text-align: center;}.buttons {display: flex;justify-content: space-around;margin-bottom: 20px;}.buttons button {background-color: black;color: white;border: none;border-radius: 5px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);padding: 10px 20px;cursor: pointer;font-size: 14px;}.text-to-type {color: gray;margin-bottom: 20px;font-size: 20px;}.text-to-type span.correct {color: green;}.text-to-type span.wrong {color: red;}input[type="text"] {width: 100%;padding: 10px;border-radius: 5px;border: 1px solid #ccc;font-size: 18px;}</style>
</head>
<body><div class="container"><div class="buttons"><button id="importText">导入文本</button><button id="addText">添加文本</button><button id="startPractice">开始练习</button><button id="endPractice">结束练习</button></div><div class="text-to-type" id="textToType">这是一个打字练习的例子</div><input type="text" id="inputText" placeholder="开始打字..." /></div><script>const textToType = document.getElementById('textToType');const inputText = document.getElementById('inputText');const importTextBtn = document.getElementById('importText');const addTextBtn = document.getElementById('addText');const startPracticeBtn = document.getElementById('startPractice');const endPracticeBtn = document.getElementById('endPractice');let originalText = textToType.innerText;let startTime = null;let alertCount = 0;let correctCount = 0;inputText.addEventListener('input', () => {const typedText = inputText.value;let updatedText = '';correctCount = 0;if (startTime) {for (let i = 0; i < originalText.length; i++) {if (i < typedText.length) {if (typedText[i] === originalText[i]) {updatedText += `<span class="correct">${originalText[i]}</span>`;correctCount++;} else {updatedText += `<span class="wrong">${originalText[i]}</span>`;}} else {updatedText += originalText[i];}}textToType.innerHTML = updatedText;}if (typedText === originalText && startTime) {const endTime = new Date();const timeTaken = ((endTime - startTime) / 1000).toFixed(2);const accuracy = ((correctCount / originalText.length) * 100).toFixed(2);alert(`总用时间: ${timeTaken} 秒\n正确率: ${accuracy}%`);alertCount++;if (alertCount < 3) {alert(`这是第 ${alertCount} 次弹窗`);}inputText.value = '';startTime = null;}});importTextBtn.addEventListener('click', () => {const fileInput = document.createElement('input');fileInput.type = 'file';fileInput.accept = '.txt';fileInput.onchange = e => {const file = e.target.files[0];const reader = new FileReader();reader.onload = event => {originalText = event.target.result.trim();textToType.innerText = originalText;};reader.readAsText(file);};fileInput.click();});addTextBtn.addEventListener('click', () => {const userInput = prompt('请输入要练习的文本:');if (userInput) {originalText = userInput.trim();textToType.innerText = originalText;}});startPracticeBtn.addEventListener('click', () => {startTime = new Date();inputText.value = '';textToType.innerHTML = originalText;});endPracticeBtn.addEventListener('click', () => {if (startTime) {const endTime = new Date();const timeTaken = ((endTime - startTime) / 1000).toFixed(2);const accuracy = ((correctCount / originalText.length) * 100).toFixed(2);alert(`练习结束\n总用时间: ${timeTaken} 秒\n正确率: ${accuracy}%`);startTime = null;inputText.value = '';} else {alert('请先开始练习!');}});</script>
</body>
</html>

相关文章：

JS+H5打字练习器

实现功能 1.导入.TXT文件到打字练习内容&#xff08;部分浏览器可能出于安全问题限制了这一步操作&#xff09; 2.输入文本到打字练习内&#xff08;弹出输入框&#xff0c;将要练习的内容输入至输入框&#xff09; 3. 开始练习&#xff0c;并根据正误在打字练习内容文本上修…...

编程日记 2024/8/3 6:14:41

windows系统关闭开机自检硬盘

效果&#xff1a; 注册表关闭开机硬盘自检&#xff0c;你可以按照以下步骤操作&#xff1a; 打开注册表编辑器&#xff1a; 按 Win R 键打开“运行”对话框。输入 regedit 并按回车&#xff0c;打开注册表编辑器。 定位到自检相关的键&#xff1a; 依次展开以下路径&#x…...

编程日记 2024/8/3 6:13:39

【多线程开发 5】实践使用Lock和Condition

Lock和Condition Lock 线程之间同步或者竞争都需要锁这类结构&#xff0c;一般我们都会用Object的wait和signal搭配synchronized关键字进行多线程开发&#xff0c;但是很多时候会造成死锁的现象&#xff0c;这是因为synchroniezd无法破坏死锁的产生条件&#xff0c;但是Lock接…...

编程日记 2024/8/3 6:12:38

2.4-结构化并发：协程的结构化异常管理

文章目录 协程结构化异常流程协程结构化异常流程和取消流程的区别子协程异常为什么要连带取消父协程&#xff1f; CoroutineExceptionHandler异常协程异常的最后一道拦截&#xff1a;CoroutineExceptionHandlerCoroutineExceptionHandler 为什么只能设置给最外层协程才有效&…...

编程日记 2024/8/3 6:11:37

Android 12.0 debug版本打开OEM解锁开关功能实现

通常为了方便push在debug版本会采用如下命令 adb root adb disable-verity 提示&#xff1a; Device is locked. Please unlock the device first. 查找日志可以发现system/core/set-verity-state/set-verity-state.cpp文件中is_avb_device_locked方法里 这个获取ro.boot…...

编程日记 2024/8/3 6:10:36

linux用户组练习

准备工作 [rootlocalhost ~]# watch -n 1 tail -n 5 /etc/group使用watch 动态监控 1.建立用户组 shengcan&#xff0c;其id 为2000 2.建立用户组 caiwu&#xff0c;其id 为 2001 3.足建立用户组 jishu&#xff0c;其id 为 2002 4.建立用户lee&#xff0c;指定其主组id为sh…...

编程日记 2024/8/3 6:09:35

[Docker][Docker Container]详细讲解

目录 1.什么是容器&#xff1f;2.容器命令1.docker creatre2.docker run3.docker ps4.docker logs5.docker attach6.docker exec7.docker start8.docker stop9.docker restart10.docker kill11.docker top12.docker stats13.docker container inspect14.docker port15.docker c…...

编程日记 2024/8/3 6:08:31

塑造美好心灵，激发创造活力｜第三届瓷艺中华“陶溪川杯”儿童青少年陶瓷作品展开展

第三届瓷艺中华“陶溪川杯”儿童青少年陶瓷作品展 展览现场 由中央美术学院、景德镇陶瓷大学、景德镇陶文旅控股集团共同主办&#xff0c;由中国非物质文化遗产保护协会陶瓷分会、中国文化艺术发展促进会陶瓷专业委员会、中央美术学院陶瓷艺术研究院、中央美术学院少儿美术教…...

编程日记 2024/8/3 6:07:30

鸿蒙开发刷新单个item会闪一下处理

鸿蒙开发刷新单个item会闪一下 首先我用的是懒加载方式，改变某位数据后我调listener.onDataChange(index)，发现item的改动是变了，但是item也闪了一下。 先分析为什么item会闪一下 其他是因为item上有图片，加载的网络图。你onDataChange(index)时，它会重新加载这一item，…...

编程日记 2024/8/3 6:06:28

您需要了解的有关 5G 的一切。

转载 https://www.qualcomm.com/5g/what-is-5g 在这里&#xff0c;您可以找到 5G 技术的解释——5G 的工作原理、5G 的重要性以及它如何改变世界连接和沟通的方式。在 Qualcomm&#xff0c;我们发明了使 5G 成为可能的根本性突破。 问&#xff1a;什么是 5G&#xff1f; 答&…...

编程日记 2024/8/3 6:05:26

【redis】初识redis入门，基础部署以及介绍

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…...

编程日记 2024/8/3 6:04:24

数据库基础 -- 数据库约束

数据库基础 – 数据库约束 1.约束 1.1 概念 约束是用于强制数据库中数据 完整性 和 一致性 的规则。它们定义了对表中数据的限制&#xff0c;确保数据的有效性和正确性&#xff0c;实际上就是表中数据的限制条件。 1.2 分类 1.2.1 完整性约束 主键约束(Primary Key Const…...

编程日记 2024/8/3 6:03:23

U盘文件或目录损坏无法读取？专业恢复策略全解析

U盘困境&#xff1a;文件目录的隐形危机 在日常的数字生活中&#xff0c;U盘作为便捷的数据存储与传输工具&#xff0c;扮演着至关重要的角色。然而&#xff0c;当U盘中的文件或目录突然遭遇损坏&#xff0c;导致无法被正常读取时&#xff0c;这无疑给用户带来了极大的困扰。这…...

编程日记 2024/8/3 6:02:21

dpdk实现udp协议栈

使用DPDK实现UDP用户态协议栈&#xff0c;实现流程中包括&#xff1a; 三类线程 1、收发包线程 2、用户态协议栈线程 3、udp服务端线程 两类缓冲区&#xff1a; 1、协议栈收包缓冲区和协议栈发包缓冲区 2、udp收包缓冲区和udp发包缓冲区 协议栈缓冲区中存储的数据是str…...

编程日记 2024/8/3 6:01:19

Shell编程——基础语法（2）和 Shell流程控制

文章目录 基础语法&#xff08;2&#xff09;echo命令read命令printf命令test命令 Shell流程控制if-else语句for 循环while 语句until 循环case ... esac跳出循环 基础语法&#xff08;2&#xff09; echo命令 Shell 的 echo 指令与 PHP 的 echo 指令类似&#xff0c;都是用于…...

编程日记 2024/8/3 6:00:18

Python基础教程（二）字符串和函数

6.字符串 6.1 字符串的表示方式 6.1.1 普通字符串 普通字符串指用单引号()或双引号(”")括起来的字符串。例如:Hello或"Hello" >>> Hello Hello >>> "Hello" Hello >>> s\u0048\u0065\u006c\u006c\u006f >>> …...

编程日记 2024/8/3 5:59:17

智算新风向丨趋动科技获中国信通院泰尔实验室首张智算资源池化能力泰尔测评证书

近日&#xff0c;趋动科技“OrionX AI算力资源池化软件”经中国泰尔实验室依据《FG-Z14-0172-01智算资源池化平台测试方案》评估测试&#xff0c;获得智算资源池化能力泰尔测评证书&#xff0c;成为该领域首个完成此评价的产品。 图1.OrionX通过智算资源池化平台评测 随着AI大…...

编程日记 2024/8/3 5:58:09

计算机基础（Windows 10+Office 2016）教程 —— 第4章 计算机网络与Internet（上）

第4章 计算机网络与Internet 4.1 计算机网络概述4.1.1 计算机网络的定义4.1.2 计算机网络的发展4.1.3 计算机网络的功能4.1.4 计算机网络体系结构和TCP/IP 参考模型 4.2 计算机网络的组成和分类4.2.1 计算机网络的组成4.2.2 计算机网络的分类 4.3 网络传输介质和通信设备4.3.1 …...

编程日记 2024/8/3 5:57:07

MES系统在数字化转型中的核心作用与影响

数字化转型是企业利用数字技术改变其业务模式、运营方式、组织结构、产品服务等方面的过程&#xff0c;旨在提高效率、降低成本、增强竞争力并实现可持续发展。数字化转型涉及多个层面&#xff0c;主要包括以下几个方面&#xff1a; 数字化转型转什么 转战略&#xff1a;由构…...

编程日记 2024/8/3 5:56:06

装修施工注意事项

1 地漏保护 咋墙拆改时&#xff0c;一定要用保护盖把所有的地漏下水管道都拧紧 2 卫生间防水做完&#xff0c;必须要先用水泥砂浆做好保护层再贴&#xff0c;不然后续施工&#xff0c;不小心破坏防水层&#xff0c;以后漏水后悔都晚了。 3 入户门口处&#xff0c;一定要用…...

编程日记 2024/8/3 5:55:05

【Docker学习记录】

Docker学习记录 目录 1. Windows上使用wsl1.1 安装docker后遇到的一些疑惑1.2. wsl的一些相关命令1.3. 补一点&#xff0c;wsl的作用 2. docker一些常用的命令2.1 构建docker镜像2.2 运行镜像 3. Dockerfile的编写3.0 docker的一些概念3.0.1 容器的分层3.0.2 COPY-ON-WRITE 3.…...

编程日记 2024/8/3 5:54:04

互联网政务应用安全管理规定

互联网政务应用安全管理规定 &#xff08;2024年2月19日中央网络安全和信息化委员会办公室、中央机构编制委员会办公室、工业和信息化部、公安部制定　2024年5月15日发布&#xff09; 第一章 总则 第一条为保障互联网政务应用安全&#xff0c;根据《中华人民共和国网络安全法…...

编程日记 2024/8/3 5:53:03

HarmonyOS开发商城首页实现

目录 一：功能概述 二：代码实现 三：效果图 一：功能概述 这一节我们主要在鸿蒙OS系统中实现的一个底部导航功能，并在首页底部使用TabSwitch组件进行导航切换。同时，首页采用Search组件实现商品搜索框，Scroll和Swiper组件实现图片轮播功能，以展示推荐内容或图片。 1：…...

编程日记 2024/8/3 5:52:02

QtQuick Text-文本样式

属性 Text项目的style属性可以设置文本的样式。 支持的文本样式有&#xff1a; Text.Normal&#xff08;默认&#xff09;Text.OutlineText.RaisedText.Sunken 示例 import QtQuickRow{spacing: 10padding: 10Text {font.pointSize: 40text: "Normal"}Text {font…...

编程日记 2024/8/3 5:49:59

人工智能未来展望

深入剖析人工智能&#xff1a;现状、挑战与未来展望 在当今这个日新月异的科技时代&#xff0c;人工智能&#xff08;AI&#xff09;无疑是最为耀眼的明星之一。它以其独特的魅力&#xff0c;正引领着一场前所未有的技术革命&#xff0c;深刻地改变着人类社会的方方面面。本文…...

编程日记 2024/8/3 5:48:58

Pymol开源版安装 新版 3.0 / 3.1 Windows安装Pymol开源版

PyMOL 简介 PyMOL 是一个开源的分子可视化系统&#xff0c;被广泛应用于结构生物学中。它允许用户可视化分子结构&#xff0c;并创建高质量的蛋白质、核酸和其他大分子的3D图像。多年来&#xff0c;PyMOL不断发展&#xff0c;新版本引入了更多的功能和改进。 PyMOL 3.0 / 3.1…...

编程日记 2024/8/3 5:46:56

记录一次环境的安装

目录 新添加的代码 代码解释 为啥ubuntu用debian软件源 为啥修改sources.list.d S权限意思 php缺少和数据库连接的模块 使用root登陆数据库1698错误 字段解释 auth_socket解释 使用root登陆数据库方法 详细解释 首先在安装的时候&#xff0c;有一个dockerfile文件&a…...

编程日记 2024/8/3 5:45:55

浏览器用户文件夹详解 - WebData(八)

1.WebData简介 1.1 什么是WebData文件&#xff1f; WebData文件是Chromium浏览器中用于存储用户表单数据、自动填充信息和支付信息的一个重要文件。每当用户在浏览器中填写表单或保存支付信息时&#xff0c;这些数据都会被记录在WebData文件中。通过这些记录&#xff0c;浏览…...

编程日记 2024/8/3 5:44:54

ijkplayer 自定义协议播放加密内容 Android

想对播放的音视频进行加密&#xff0c;防止资源被盗用&#xff0c;该怎么办呢&#xff1f; 这篇文章从自定义协议的角度来提供一中实现思路。在 ijkplayer 的基础上&#xff0c;通过实现自定义协议对文件进行解密。边解边播&#xff0c;以此为基础&#xff0c;还可以实现在线资…...

编程日记 2024/8/3 5:43:52

【kill】Centos/Linux 如何杀死那该死的进程？

简介 系统版本&#xff1a;Centos7.6 kill 命令发送指定的信号到指定的进程或者进程组。如果该信号没有指定&#xff0c;则发送SIGTERM信号&#xff08;15&#xff09;&#xff0c;即终止信号。如果SIGTERM信号&#xff08;15&#xff09;无法终止&#xff0c;可使用SIGKILL&am…...

编程日记 2024/8/3 5:42:51

网站的设计与开发论文/网站宣传方法

红黑树插入和删除结点的全程演示 作者&#xff1a;July、saturnman。时间&#xff1a;二零一一年三月二十八日。出处&#xff1a;http://blog.csdn.net/v_JULY_v。声明&#xff1a;版权所有&#xff0c;侵权必究。----------------------------------- 引言&#xff1a;目前国内…...

编程日记 2025/1/11 16:21:14

网站建设的经济效益/广告网络推广

hive在创建表时默认存储格式是textfile,或者显示自定义的stored as textfile。 很多人知道hive常用的存储格式有三种&#xff0c;textfile,sequencefile,rcfile&#xff0c;但是却说不清楚这三种格式的干什么用的&#xff0c;本质有有什么区别&#xff1f;适合什么时候用&…...

编程日记 2025/1/11 14:20:52

网站的站外推广手段/如何进行市场推广

之前看过Makefile&#xff0c;只记住了一些基本语法&#xff0c;细节没掌握太多&#xff0c;上手基本写不出来。用时只能搬砖&#xff0c;导致很简单的脚本要画很长时间来磨。 1. 粘贴过来的脚本&#xff0c;注意其每行的空格&#xff0c; 尤其是输出时候看到很诡异的错误&…...

编程日记 2025/1/11 13:10:52

织梦新闻门户网站模板/网络推广外包公司

1&#xff0c;空指针和索引越界 ArrayIndexOutOfBoundsException:数组索引越界异常 原因&#xff1a;你访问了不存在的索引。 b:NullPointerException:空指针异常 原因&#xff1a;数组已经不在指向堆内存了。而你还用数组名去访问元素。 【1】ArrayIndexOutOfBoundsExcepti…...

编程日记 2025/1/11 11:30:03

公司网站怎样做维护/百度大数据官网

主要是卡在那里不动&#xff0c;并且没有报错信息。让人很头疼。 在网上看了很多办法大概有&#xff1a; 1:说数据库连接不正确。 2:需要clear项目的。 3:修改tomcat的日志级别。等等但是都没有解决问题解决办法&#xff1a;1.查看Myeclipse自带的Tomcat。是不是版本过低&#…...

编程日记 2025/1/11 11:18:58

网站建设的开发语言/全网软文推广

An error happened during template parsing (template: “class path resource [templates//index.html]” - line 129, col 9) 出现这个问题我一开始以为是Thymeleaf模板没声明或者其他问题&#xff0c;搞了半小时才发现是th:if"${map.post.status1}"少了个"…...

编程日记 2025/1/11 10:36:25