实现功能
1.导入.TXT文件到打字训练内容（部分欣赏器大概出于安全题目限定了这一步操纵）
2.输入文本到打字训练内（弹出输入框，将要训练的内容输入至输入框）
3. 开始训练，并根据正误在打字训练内容文本上修改颜色（某个字精确表现绿色，某个字错误，表现赤色，某个字没有打表现灰色）
4.开始训练、竣事训练，全部输入完成后主动竣事训练，也可提前手动竣事训练，竣事训练后弹窗用表现时和精确率。（区别在于一个全部输入完成且全部精确，一个提前竣事无其他条件）
效果图
分析
HTML 布局剖析
- 根元素：<!DOCTYPE html> 声明文档范例为HTML。
- html 元素：包罗整个页面的内容，并设置语言为中文（lang="zh-CN"）。
- head 元素：包罗页面的元数据，如字符集（charset="UTF-8"）、视口设置（viewport）和标题（<title>）。
- style 元素：包罗页面的CSS样式。
- body 元素：包罗页面的可见内容。
- .container 类：包罗文本输入框和按钮，并设置样式。
- .buttons 类：包罗一组按钮，并设置布局样式。
- .text-to-type 类：包罗待输入的文本，并设置样式。
- input 元素：一个文本输入框，用于用户输入。
JavaScript 剖析
- 变量声明：
- textToType：获取待输入文本的DOM元素。
- inputText：获取用户输入文本的DOM元素。
- importTextBtn、addTextBtn、startPracticeBtn、endPracticeBtn：获取按钮的DOM元素。
- originalText：存储原始待输入的文本。
- startTime：存储开始训练的时间。
- alertCount：存储弹窗次数。
- correctCount：存储精确的字符数。
- inputText 输入变乱监听器：
- 当用户在输入框中输入时，会触发此变乱。
- 获取用户当前输入的文本。
- 初始化一个空字符串updatedText用于构建更新后的文本。
- 假如startTime已设置，遍历原始文本和用户输入的文本：
- 假如字符匹配，将字符标记为correct。
- 假如字符不匹配，将字符标记为wrong。
- 更新textToType的HTML内容。
- 假如用户输入的文本与原始文本完全匹配，盘算总用时和精确率，并通过弹窗表现效果。
- 重置输入框和startTime。
- importTextBtn 点击变乱监听器：
- 创建一个文件输入元素，允许用户选择.txt文件。
- 当文件被选中后，利用FileReader读取文件内容。
- 读取完成后，将文本内容赋值给originalText并更新textToType。
- addTextBtn 点击变乱监听器：
- 弹出一个输入框让用户输入文本。
- 假如用户输入了文本，将其赋值给originalText并更新textToType。
- startPracticeBtn 点击变乱监听器：
- 设置startTime为当前时间。
- 清空输入框。
- 更新textToType的HTML内容为原始文本。
- 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%;
-
|
发表于 2026-2-14 07:54:29