JS+H5打字练习器
创始人
2024-11-13 09:38:45
0次
实现功能
1.导入.TXT文件到打字练习内容（部分浏览器可能出于安全问题限制了这一步操作）
2.输入文本到打字练习内（弹出输入框，将要练习的内容输入至输入框）
3. 开始练习，并根据正误在打字练习内容文本上修改颜色（某个字正确显示绿色，某个字错误，显示红色，某个字没有打显示灰色）
4.开始练习、结束练习，全部输入完成后自动结束练习，也可提前手动结束练习，结束练习后弹窗用显示时和正确率。（区别在于一个全部输入完成且全部正确，一个提前结束无其他条件）
效果图
分析
HTML 结构解析
- 根元素：
声明文档类型为HTML。 html元素：包含整个页面的内容，并设置语言为中文（lang="zh-CN"）。head元素：包含页面的元数据，如字符集（charset="UTF-8"）、视口设置（viewport）和标题（</code>）。</li><li><strong><code>style</code> 元素</strong>：包含页面的CSS样式。 <ul><li>设置页面背景颜色、字体、布局样式等。</li></ul></li><li><strong><code>body</code> 元素</strong>：包含页面的可见内容。 <ul><li>使用Flexbox布局使内容居中。</li></ul></li><li><strong><code>.container</code> 类</strong>：包含文本输入框和按钮，并设置样式。</li><li><strong><code>.buttons</code> 类</strong>：包含一组按钮，并设置布局样式。</li><li><strong><code>.text-to-type</code> 类</strong>：包含待输入的文本，并设置样式。</li><li><strong><code>input</code> 元素</strong>：一个文本输入框，用于用户输入。</li></ol><h4>JavaScript 解析</h4><ol><li><p><strong>变量声明</strong>：</p><ul><li><code>textToType</code>：获取待输入文本的DOM元素。</li><li><code>inputText</code>：获取用户输入文本的DOM元素。</li><li><code>importTextBtn</code>、<code>addTextBtn</code>、<code>startPracticeBtn</code>、<code>endPracticeBtn</code>：获取按钮的DOM元素。</li><li><code>originalText</code>：存储原始待输入的文本。</li><li><code>startTime</code>：存储开始练习的时间。</li><li><code>alertCount</code>：存储弹窗次数。</li><li><code>correctCount</code>：存储正确的字符数。</li></ul></li><li><p><strong><code>inputText</code> 输入事件监听器</strong>：</p><ul><li>当用户在输入框中输入时，会触发此事件。</li><li>获取用户当前输入的文本。</li><li>初始化一个空字符串<code>updatedText</code>用于构建更新后的文本。</li><li>如果<code>startTime</code>已设置，遍历原始文本和用户输入的文本： <ul><li>如果字符匹配，将字符标记为<code>correct</code>。</li><li>如果字符不匹配，将字符标记为<code>wrong</code>。</li></ul></li><li>更新<code>textToType</code>的HTML内容。</li><li>如果用户输入的文本与原始文本完全匹配，计算总用时和正确率，并通过弹窗显示结果。</li><li>重置输入框和<code>startTime</code>。</li></ul></li><li><p><strong><code>importTextBtn</code> 点击事件监听器</strong>：</p><ul><li>创建一个文件输入元素，允许用户选择<code>.txt</code>文件。</li><li>当文件被选中后，使用<code>FileReader</code>读取文件内容。</li><li>读取完成后，将文本内容赋值给<code>originalText</code>并更新<code>textToType</code>。</li></ul></li><li><p><strong><code>addTextBtn</code> 点击事件监听器</strong>：</p><ul><li>弹出一个输入框让用户输入文本。</li><li>如果用户输入了文本，将其赋值给<code>originalText</code>并更新<code>textToType</code>。</li></ul></li><li><p><strong><code>startPracticeBtn</code> 点击事件监听器</strong>：</p><ul><li>设置<code>startTime</code>为当前时间。</li><li>清空输入框。</li><li>更新<code>textToType</code>的HTML内容为原始文本。</li></ul></li><li><p><strong><code>endPracticeBtn</code> 点击事件监听器</strong>：</p><ul><li>如果<code>startTime</code>已设置，计算总用时和正确率，并通过弹窗显示结果。</li><li>重置<code>startTime</code>和输入框。</li></ul></li></ol><h3>完成源代码</h3> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>打字练习 这是一个打字练习的例子