<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Timer</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div style="margin: 20px auto; text-align: center;">
<div style="padding: 50px;">
<input type="button" id="btnstart" value="start" />
</div>
<div style="background-color: hsl(34, 78%, 91%); width: 500px; margin: 20px auto">
<label id="labNumber" style="font-size: 80px; font-weight: bold;">
10
</label>
</div>
<h2>Please Choose the correct answer:</h2>
<h3>1: 1+1=?</h3>
<input type="radio" name="answer" value="1" />1
<input type="radio" name="answer" value="2" />2
<input type="radio" name="answer" value="3" />3
<input type="radio" name="answer" value="4" />4<br />
<input type="button" id="btnSubmit" value="submit" />
<div style="padding: 50px;">
<input type="button" id="btnStop" value="Stop" />
</div>
</div>
<script type="text/javascript">
$(‘<audio id="auSound"><source src="sound/wrong_answer_buzzer.mp3" type="audio/mpeg"></audio><audio id="auCorrect"><source src="sound/correct_answer_bell_ring.mp3" type="audio/mpeg"></audio>‘).appendTo(‘body‘);
var timerId;
$("#btnstart").live("click", function () {
$("input[name=answer]").attr("disabled", false);
clearInterval(timerId);
var number = 10;
var $number = $("#labNumber");
$number.text(number);
timerId = setInterval(function () {
if (number > 0) {
$number.text(‘0‘ + (--number));
} else {
clearInterval(timerId);
$(‘#auSound‘)[0].play();
$("input[name=answer]").attr("disabled", true);
}
}, 1000);
})
$("#btnStop").live("click", function () {
clearInterval(timerId);
});
$("#btnSubmit").live("click", function () {
clearInterval(timerId);
if ($(":radio:checked").val() == "2") {
$(‘#auCorrect‘)[0].play();
alert("correct");
} else {
$(‘#auSound‘)[0].play();
alert("wrong");
}
});
</script>
</body>
</html>
这是效果图：（声音文件就不上传了,可以自行百度）
时间： 2024-10-10 08:59:20