HTML 声母韵母组合练习程序代码
以下是一个简单的 HTML 代码示例，实现了随机显示汉字的标音、根据标音的准确性显示不同图片、并在右上角显示积分的功能：
<!DOCTYPE html>
<html>
<head>
<title>标音练习</title>
<style>
#score {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>声母.韵母 组合练习</h1>
<h2 id='syllable'></h2>
<img id='image' src='' alt='声音图片'>
<div id='score'>积分: 0</div>
<script>
var syllables = [
{ chinese: '爸', pinyin: 'bā', correct: '1' },
{ chinese: '妈', pinyin: 'mā', correct: '1' },
{ chinese: '哥', pinyin: 'gē', correct: '1' },
{ chinese: '姐', pinyin: 'jiě', correct: '1' },
{ chinese: '弟', pinyin: 'dì', correct: '1' },
{ chinese: '妹', pinyin: 'mèi', correct: '1' },
{ chinese: '孩', pinyin: 'hái', correct: '2' },
{ chinese: '兄', pinyin: 'xiōng', correct: '2' },
{ chinese: '妻', pinyin: 'qī', correct: '2' },
{ chinese: '夫', pinyin: 'fū', correct: '2' }
];
var score = 0;
var syllableIndex = Math.floor(Math.random() * syllables.length);
function displaySyllable() {
var syllable = syllables[syllableIndex];
document.getElementById('syllable').textContent = syllable.chinese + ' - ' + syllable.pinyin;
document.getElementById('image').src = syllable.correct === '1' ? 'image1.png' : 'image2.png';
}
function updateScore(correct) {
score += correct ? 2 : -1;
document.getElementById('score').textContent = '积分: ' + score;
}
displaySyllable();
document.addEventListener('keydown', function(event) {
if (event.key === '1' || event.key === '2') {
var correct = event.key === syllables[syllableIndex].correct;
updateScore(correct);
syllableIndex = Math.floor(Math.random() * syllables.length);
displaySyllable();
}
});
</script>
</body>
</html>
在上面的代码中，我们首先定义了一个syllables数组，其中包含了不同汉字的标音信息。每个标音对象都有chinese（汉字）、pinyin（标音）、correct（标音准确性，1代表正确，2代表错误）属性。
然后，我们使用syllableIndex来随机选择一个标音对象，并将其显示在页面上的<h2>标签中。根据correct属性的值，我们设置了<img>标签的src属性，来显示不同的声音图片。
同时，我们使用score变量来记录积分，并将其显示在页面右上角的<div>标签中。根据用户的输入（按下键盘上的1或2键），我们更新积分，并随机选择下一个标音对象进行显示。
请注意，为了方便测试，你需要将代码中的image1.png和image2.png替换为实际的图片路径。
原文地址: https://www.cveoy.top/t/topic/o0v9 著作权归作者所有。请勿转载和采集!