计时 答题 demo 

<!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>

 

 

这是效果图：（声音文件就不上传了,可以自行百度）

posted @ 2014-12-10 17:53  毛毛球的书签  阅读(184)  评论(0)  编辑  收藏  举报