这段代码是一个 HTML 页面，它包含 CSS 样式和 JavaScript 脚本，用于创建一个简单的打字练习工具。用户可以在输入框中输入文本，页面会实时反馈用户的输入是否正确，并高亮显示正确的字符和错误的字符。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你。
演示效果
HTML&CSS
<!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;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.text-to-type {
font-size: 24px;
margin-bottom: 20px;
color: #333;
white-space: pre-wrap;
}
.input-field {
width: 100%;
padding: 10px 0;
font-size: 18px;
border: 2px solid #ccc;
border-radius: 5px;
outline: none;
text-indent: 10px;
}
.input-field.correct {
border-color: green;
}
.input-field.incorrect {
border-color: red;
}
.feedback {
margin-top: 10px;
font-size: 18px;
}
.feedback.correct {
color: green;
}
.feedback.incorrect {
color: red;
}
.correct-char {
color: green;
}
.incorrect-char {
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="text-to-type" id="text-to-type">键盘打字练习！</div>
<input type="text" class="input-field" id="input-field" placeholder="在这里输入...">
<div class="feedback" id="feedback"></div>
</div>
<script>
const textToType = document.getElementById('text-to-type');
const inputField = document.getElementById('input-field');
const feedback = document.getElementById('feedback');
const targetText = textToType.textContent;
// 初始化文本显示
function renderText(typedText) {
let newHTML = '';
for (let i = 0; i < targetText.length; i++) {
const targetChar = targetText[i];
const typedChar = typedText[i];
if (typedChar === undefined) {
newHTML += targetChar; // 未输入的字符保持默认颜色
} else if (typedChar === targetChar) {
newHTML += `<span class="correct-char">${targetChar}</span>`; // 正确字符
} else {
newHTML += `<span class="incorrect-char">${targetChar}</span>`; // 错误字符
}
}
textToType.innerHTML = newHTML;
}
inputField.addEventListener('input', () => {
const typedText = inputField.value;
// 渲染文本
renderText(typedText);
// 判断输入是否正确
if (typedText === targetText) {
inputField.classList.remove('incorrect');
inputField.classList.add('correct');
feedback.textContent = '正确！';
feedback.classList.remove('incorrect');
feedback.classList.add('correct');
} else if (targetText.startsWith(typedText)) {
inputField.classList.remove('incorrect');
inputField.classList.remove('correct');
feedback.textContent = '';
} else {
inputField.classList.remove('correct');
inputField.classList.add('incorrect');
feedback.textContent = '错误！';
feedback.classList.remove('correct');
feedback.classList.add('incorrect');
}
});
</script>
</body>
</html>
HTML 结构
- container: 创建一个类名为“container”的 div 元素，用于包含打字练习的各个部分。
- text-to-type: 显示需要输入的文本。
- input-field>: 创建一个输入框，用于用户输入。
- feedback: 显示反馈信息，如“正确！”或“错误！”。
CSS 样式
- body: 设置页面的字体、显示方式、对齐方式、高度、背景色和边距。
- .container: 设置容器的样式，包括文本对齐、背景色、内边距、圆角和阴影。
- .text-to-type: 设置需要输入的文本的样式，包括字体大小、边距和颜色。
- .input-field: 设置输入框的样式，包括宽度、内边距、字体大小、边框、圆角和缩进。
- .input-field.correct, .input-field.incorrect: 设置输入框在正确或错误时的边框颜色。
- .feedback: 设置反馈信息的样式，包括边距和字体大小。
- .feedback.correct, .feedback.incorrect: 设置反馈信息在正确或错误时的颜色。
- .correct-char, .incorrect-char: 设置正确或错误字符的颜色。
JavaScript 部分
初始化变量:
- 获取页面中的元素（textToType, inputField, feedback）。
- 定义目标文本（targetText），即用户需要输入的文本。
渲染文本:
- renderText(typedText): 根据用户输入的文本，更新目标文本的显示。
- 遍历目标文本的每个字符，根据用户输入的字符是否正确，使用 correct-char 或 incorrect-char 高亮显示。
处理输入事件:
- inputField.addEventListener(‘input’, …): 监听输入框的输入事件。
- 获取用户输入的文本（typedText）。
- 调用 renderText(typedText)更新目标文本的显示。
- 如果用户输入完全正确，设置输入框和反馈信息的样式为“正确”。
- 如果用户输入部分正确，清除输入框和反馈信息的错误样式。
- 如果用户输入错误，设置输入框和反馈信息的样式为“错误”。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享、推荐走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
