# 英文打字练习程序 (HTML5 + JavaScript + CSS) 下面是一个简单的英文打字练习程序的完整代码实现： ```html <!DOCTYPE html> <html lang="en"> <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; max-width: 800px; margin: 0 auto; padding: 20px; text-align: center; background-color: #f5f5f5; } .container { background-color: white; padding: 30px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { color: #333; } .text-display { font-size: 24px; margin: 30px 0; padding: 20px; background-color: #f9f9f9; border-radius: 5px; min-height: 100px; text-align: left; line-height: 1.5; } .input-area { width: 100%; height: 150px; font-size: 18px; padding: 10px; border: 2px solid #ddd; border-radius: 5px; resize: none; } .stats { display: flex; justify-content: space-around; margin: 20px 0; font-size: 18px; } .stat-item { background-color: #e9e9e9; padding: 10px 20px; border-radius: 5px; } .controls { margin-top: 20px; } button { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 0 10px; } button:hover { background-color: #45a049; } .highlight { background-color: yellow; } .correct { color: green; } .incorrect { color: red; text-decoration: underline; } </style> </head> <body> <div class="container"> <h1>英文打字练习</h1> <div class="stats"> <div class="stat-item">时间: <span id="time">60</span>秒</div> <div class="stat-item">速度: <span id="wpm">0</span> WPM</div> <div class="stat-item">准确率: <span id="accuracy">0</span>%</div> </div> <div class="text-display" id="textDisplay"></div> <textarea class="input-area" id="userInput" placeholder="在这里输入上面的文本..." disabled></textarea> <div class="controls"> <button id="startBtn">开始练习</button> <button id="newTextBtn">新文本</button> </div> </div> <script> // 示例文本库 const sampleTexts = [ "The quick brown fox jumps over the lazy dog. This sentence contains all the letters in the English alphabet.", "Programming is the process of creating a set of instructions that tell a computer how to perform a task.", "To be or not to be, that is the question. Whether 'tis nobler in the mind to suffer the slings and arrows of outrageous fortune.", "The best way to predict the future is to invent it. Computer science is no more about computers than astronomy is about telescopes.", "Life is what happens when you're busy making other plans. The only limit to our realization of tomorrow will be our doubts of today." ]; // DOM元素 const textDisplay = document.getElementById('textDisplay'); const userInput = document.getElementById('userInput'); const startBtn = document.getElementById('startBtn'); const newTextBtn = document.getElementById('newTextBtn'); const timeDisplay = document.getElementById('time'); const wpmDisplay = document.getElementById('wpm'); const accuracyDisplay = document.getElementById('accuracy'); // 变量 let timer; let timeLeft = 60; let isTyping = false; let startTime; let currentText = ''; // 初始化 function init() { loadNewText(); setupEventListeners(); } // 加载新文本 function loadNewText() { const randomIndex = Math.floor(Math.random() * sampleTexts.length); currentText = sampleTexts[randomIndex]; textDisplay.innerHTML = ''; // 将文本拆分为字符并添加到显示区域 currentText.split('').forEach(char => { const span = document.createElement('span'); span.textContent = char; textDisplay.appendChild(span); }); // 重置输入区域 userInput.value = ''; userInput.disabled = true; // 重置统计 timeLeft = 60; timeDisplay.textContent = timeLeft; wpmDisplay.textContent = '0'; accuracyDisplay.textContent = '0'; // 重置状态 isTyping = false; clearInterval(timer); } // 设置事件监听器 function setupEventListeners() { startBtn.addEventListener('click', startTyping); newTextBtn.addEventListener('click', loadNewText); userInput.addEventListener('input', checkTyping); } // 开始打字 function startTyping() { if (isTyping) return; isTyping = true; userInput.disabled = false; userInput.focus(); startTime = new Date().getTime(); // 开始计时 timer = setInterval(() => { timeLeft--; timeDisplay.textContent = timeLeft; if (timeLeft <= 0) { endTyping(); } }, 1000); } // 结束打字 function endTyping() { clearInterval(timer); isTyping = false; userInput.disabled = true; // 计算最终统计 calculateStats(); } // 检查打字输入 function checkTyping() { const inputText = userInput.value; const textSpans = textDisplay.querySelectorAll('span'); let correctChars = 0; textSpans.forEach((span, index) => { const inputChar = inputText[index]; // 重置样式 span.className = ''; if (inputChar == null) { // 未输入的字符 if (index === inputText.length) { span.classList.add('highlight'); } } else if (inputChar === span.textContent) { // 正确的字符 span.classList.add('correct'); correctChars++; } else { // 错误的字符 span.classList.add('incorrect'); } }); // 实时更新统计 calculateStats(); } // 计算统计信息 function calculateStats() { const inputText = userInput.value; const elapsedTime = (new Date().getTime() - startTime) / 1000 / 60; // 转换为分钟 // 计算WPM (每分钟字数) const words = inputText.trim().split(/\s+/).length; const wpm = elapsedTime > 0 ? Math.round(words / elapsedTime) : 0; wpmDisplay.textContent = wpm; // 计算准确率 let correctChars = 0; const textSpans = textDisplay.querySelectorAll('span'); textSpans.forEach((span, index) => { const inputChar = inputText[index]; if (inputChar !== undefined && inputChar === span.textContent) { correctChars++; } }); const accuracy = inputText.length > 0 ? Math.round((correctChars / inputText.length) * 100) : 0; accuracyDisplay.textContent = accuracy; } // 初始化应用 init(); </script> </body> </html> ``` ## 功能说明 1. 随机文本生成：从预设的文本库中随机选择练习文本 2. 实时反馈： - 高亮显示当前需要输入的字符 - 正确字符显示为绿色 - 错误字符显示为红色并带下划线 3. 统计信息： - 倒计时显示剩余时间 - 实时计算打字速度(WPM - 每分钟字数) - 实时计算打字准确率 4. 控制按钮： - 开始练习按钮 - 更换新文本按钮 ## 使用方法 1. 点击"开始练习"按钮开始计时 2. 在文本框中输入上方显示的文本 3. 系统会实时显示你的打字速度和准确率 4. 60秒后自动结束，或点击"新文本"按钮随时更换练习内容 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 计时器需要在适当的时候清除，否则会导致内存泄漏 2. 字符比较时要考虑大小写和空格等特殊字符 3. 统计计算时要注意除以零的情况，特别是刚开始打字时 [2025-08-13 19:13:25 | AI写代码神器 | 2118点数解答]