计时答题 demo

时间：2014-12-10 19:24:39 阅读：113 评论：0 收藏：0 [点我收藏+]

标签：style blog http io ar color os sp java

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

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

bubuko.com,布布扣

计时答题 demo

标签：style blog http io ar color os sp java

原文地址：http://www.cnblogs.com/hanliping/p/4156026.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

计时 答题 demo

计时答题 demo