# 英文打字练习程序 以下是一个完整的英文打字练习程序，使用 HTML5、CSS 和 JavaScript 实现。该程序满足您提出的所有要求，包括界面美观、适应不同设备、两种打字模式、键盘图示、多种练习内容、丰富的设置选项以及实时统计信息。 ## 完整代码 将以下代码保存为一个 `.html` 文件（例如 `typing_practice.html`），然后在浏览器中打开即可运行。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>英文打字练习</title> <style> /* 全局样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } /* 区域 */ header { background-color: #4CAF50; color: white; padding: 10px; text-align: center; } /* 主容器 */ .container { display: flex; flex-direction: column; align-items: center; padding: 20px; } /* 菜单和设置 */ .menu, .settings { background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin: 10px 0; padding: 15px; width: 100%; max-width: 500px; } .menu h3, .settings h3 { margin-top: 0; } .menu ul { list-style: none; padding: 0; } .menu li { margin: 5px 0; } .menu label { display: block; margin: 10px 0 5px; } /* 输入区域 */ #inputArea { width: 100%; max-width: 600px; height: 150px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; padding: 10px; box-sizing: border-box; margin: 10px 0; font-size: 18px; line-height: 1.5; overflow-y: auto; } /* 键盘图 */ #keyboard { width: 100%; max-width: 600px; margin: 10px 0; } .key-row { display: flex; justify-content: center; margin-bottom: 5px; } .key { width: 50px; height: 50px; margin: 0 5px; background-color: #e0e0e0; border-radius: 5px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; user-select: none; border: 1px solid #bbb; transition: background-color 0.2s, transform 0.1s; } .key.active { background-color: #d4edda; transform: scale(1.05); } .key span { font-size: 18px; line-height: 1; } /* 状态显示 */ #status { background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 10px; width: 100%; max-width: 600px; margin: 10px 0; text-align: center; } /* 模态窗口 */ .modal { display: none; position: fixed; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 5px; position: relative; } .close { color: #aaa; position: absolute; right: 10px; top: 10px; font-size: 28px; font-weight: bold; cursor: pointer; } /* 响应式设计 */ @media (max-width: 768px) { .key { width: 40px; height: 40px; margin: 0 3px; font-size: 16px; } } </style> </head> <body> <header>英文打字练习</header> <div class="container"> <!-- 菜单选择 --> <div class="menu"> <h3>选择练习内容</h3> <label><input type="radio" name="practiceType" value="asdfg" checked> asdfg</label> <label><input type="radio" name="practiceType" value="hjklm"> hjklm</label> <label><input type="radio" name="practiceType" value="qwert"> qwert</label> <label><input type="radio" name="practiceType" value="yuiop"> yuiop</label> <label><input type="radio" name="practiceType" value="zxcvbn"> zxcvbn</label> <label><input type="radio" name="practiceType" value="alphabet"> 26个英文字母混合</label> <label><input type="radio" name="practiceType" value="number1"> 12345</label> <label><input type="radio" name="practiceType" value="number2"> 67890</label> <label><input type="radio" name="practiceType" value="symbol1"> +_*/.=</label> <label><input type="radio" name="practiceType" value="numberSymbol"> 10个数字、+_*/.=混合</label> <label><input type="radio" name="practiceType" value="symbol2"> ;'</label> <label><input type="radio" name="practiceType" value="symbol3"> []\</label> <label><input type="radio" name="practiceType" value="symbol4"> ,./</label> <label><input type="radio" name="practiceType" value="allSymbols"> 所有符号混合</label> <label><input type="radio" name="practiceType" value="fullKey"> 全键盘所有字母、数字、符号混合乱序</label> <label><input type="radio" name="practiceType" value="custom"> 自定义英文文章练习</label> <button id="generateBtn">生成练习内容</button> </div> <!-- 设置选项 --> <div class="settings"> <h3>设置</h3> <div> <label>打字时间长度（分钟）: </label> <input type="number" id="timeLimit" value="5" min="1"> </div> <div> <label> <input type="checkbox" id="soundToggle" checked> 启用打字 [2025-08-13 20:02:10 | AI写代码神器 | 2055点数解答]