zoukankan html css js c++ java

计时答题 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%);  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>

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

查看全文

相关阅读:
pycharm连接远程服务器（拉取版本）
Xftp5中文文件乱码
 pycharm连接远程服务器
 Centos中使用virtualenvwrapper
VNC连接centos图形化界面
 PIP设置镜像源
 Java实现地理坐标判断
 词袋模型和句子相似度
 词向量入门
 《深入理解 Java 虚拟机》读书笔记：类文件结构

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

计时 答题 demo

计时答题 demo