字母发音练习：点击字母播放音频，挑战随机字母考试
<!DOCTYPE html>
<html>
<head>
<title>字母发音练习</title>
<script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
</head>
<body>
<h1>字母发音练习</h1>
<p>点击任何字母以听其发音:</p>
<div id='alphabet'>
<audio id='A'>
<source src='A.mp3' type='audio/mpeg'>
</audio>
<audio id='B'>
<source src='B.mp3' type='audio/mpeg'>
</audio>
<audio id='C'>
<source src='C.mp3' type='audio/mpeg'>
</audio>
<!-- add more letters and their corresponding mp3 files here -->
<a href='#' onclick='playSound('A')'>A</a>
<a href='#' onclick='playSound('B')'>B</a>
<a href='#' onclick='playSound('C')'>C</a>
<!-- add more letters here -->
</div>
<button onclick='startExam()'>开始考试</button>
<script>
function playSound(letter) {
var audio = document.getElementById(letter);
audio.play();
}
<pre><code> function startExam() {
var letters = ['A', 'B', 'C']; // add more letters here
var index = 0;
var interval = setInterval(function() {
$('#alphabet a').eq(index).css('background-color', '#ccc');
index++;
if (index >= $('#alphabet a').length) {
clearInterval(interval);
setTimeout(function() {
for (var i = 0; i < $('#alphabet a').length; i++) {
$('#alphabet a').eq(i).css('background-color', '#fff');
}
index = 0;
var examInterval = setInterval(function() {
var letter = letters[Math.floor(Math.random() * letters.length)];
playSound(letter);
index++;
if (index >= letters.length) {
clearInterval(examInterval);
}
}, 5000);
}, 2000);
}
}, 3000);
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/oX3a 著作权归作者所有。请勿转载和采集!