Question

我有一个按钮链接，我正在使用'onClick'事件播放声音（测验问题的正确答案）。然后我想添加延迟，以便在链接功能加载下一页之前声音有足够的时间播放。我已经尝试使用设置超时功能，但我无法让它工作。这是最好的方法吗？

HEAD
<script>
$("#correct").click(function()
{
var url = "question2.html";
//5000 is the number of milliseconds (or 5 seconds) that you want to wait before redirection.
var delay = 5000;
setTimeout(function() {
window.location.href = url;
}, delay);
});
</script>

BODY

<button onclick="document.getElementById('answer1').play()" id="correct">A) Reduce – make less waste in the first place</button>

Answer 1

这是使用HTML5标签。因此，它只适用于支持HTML5的浏览器。但是，我认为通过javascript验证答案是一个坏主意，因为人们可以欺骗并查看代码并知道哪些答案已得到纠正。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- javascript/jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
  <div id='audio'>This will be replaced with an audio tag</div>
  <button id="correct">A) Reduce – make less waste in the first place</button>
  <script type='text/javascript'>
    $("#correct").on('click',function (){
        $("#audio").stop("true").delay('5000').queue(function() {
            $(this).html('<audio controls="controls" autoplay="autoplay"><source src="song.mp3" type="audio/mp3" /></audio>');
        });
    });
  </script>
</body>
</html>

为一个也播放声音的按钮添加延迟

1 个答案: