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

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

计时 答题 demo的更多相关文章

  1. 微信答题小程序 微信小程序 答题 demo 头脑王者这样的答题小程序开发 答题的微信小程序开发经验 微信答题比赛小程序

    最近随着王思聪的我撒币,我快乐,直播答题非常火.同时知乎的答题小程序头脑王者也非常火爆.大家在微信和微信群里玩的不亦乐乎. 好吧,快乐总是属于你们,我却只能埋头写代码... 公司要求赶紧开发一个这样的 ...

  2. 软件工程（FZU2015）增补作业

    说明 张老师为FZU软件工程2015班级添加了一次增补作业,总分10分,deadline是2016/01/01-2016/01/03 前11次正式作业和练习的迭代评分见:http://www.cnbl ...

  3. 软件工程(FZU2015) 增补作业

    SE_FZU目录:1 2 3 4 5 6 7 8 9 10 11 12 13 说明 张老师为FZU软件工程2015班级添加了一次增补作业,总分10分,deadline是2016/01/01-2016/ ...

  4. 轻量级通信引擎StriveEngine —— C/S通信demo(2) —— 使用二进制协议 （附源码）

    在网络上,交互的双方基于TCP或UDP进行通信,通信协议的格式通常分为两类:文本消息.二进制消息. 文本协议相对简单,通常使用一个特殊的标记符作为一个消息的结束. 二进制协议,通常是由消息头(Head ...

  5. RCF进程间通信Demo程序

    在上一篇文章RPC通信框架--RCF介绍中,介绍了RCF的优点,本篇文章从头开始演示如何用RCF编写一个跨进程通信的Demo程序. 将RCF编译为静态库 从官网下载到的源码中包含一个RCF的项目,但是 ...

  6. 一道原生js题目引发的思考（鼠标停留区块计时）

    我瞎逛个啥论坛,发现了一个题目,于是本着练手的心态就开始写起来了,于是各种问题接踵而至,收获不小. 题目是这样的: Demo: mouseenter与mouseover区别demo 跨浏览器的区块计数 ...

  7. Direct3D11学习：（四）计时和动画

    转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 接触过游戏开发的人都知道,在游戏中,计时器是一个非常重要的工具,用来精确地控制游戏帧数和动画的播放.要正确实现动 ...

  8. online judge(ACM) 的设计与分析 （有c#demo）

    ACM.OJ,算法在线判题系统. 帮朋友完成毕业设计而写的,软件环境windows系统,语言是C# winform(因为我不熟悉asp.net,现在暂用winform写的demo). 看了下其他相关论 ...

  9. Modelsim的demo入门教程

    写在前面的话学过MCU设计的朋友都知道,系统调试是多么的重要.而对于FPGA设计来说,仿真确实最重要的.一个完整的项目,必须有完整的仿真平台.有朋友说,按键仿真模型没法搞. 我只能说,你并不了解硬件及 ...

随机推荐

  1. Git实用指南

    个人整理的一些Git概念和命令,可以速查或者快速解决某些方面的问题 一.精简入门 1.克隆仓库 克隆仓库会下载仓库完整的文件.分支和历史记录 git clone [<options>] [ ...

  2. python 读取ini 配置文件

    安装 pip install configparser 1 配置文件 config.ini: [MysqlDB]user=rootpasswd=123456sport=3306db_name=my_d ...

  3. django中使用pandas Django-pandas

    在django中使用pandas操作django的ORM查询出来的QuerySet对象,可以使用插件django-pandas. 截止教程书写时间,django-pandas已发布到0.6.1. 依赖 ...

  4. python链式调用REST API把参数放到URL中

    需求格式:GET /users/:user/repos 程序: class Chain(object): def __init__(self,path=''): self._path=path def ...

  5. iTerm2 使用代理

    0x00 事件 因为 brew 安装极慢,所以需要 iTerm2 设置代理解决速度问题. 0x01 解决 代理软件开启本地 Http 端口: iTerm 设置代理: $ vim ~/.zshrc # ...

  6. linux 命令cp -a的用法

    cp -a 保留原文件属性的前提下复制文件 cp -r dirname(源文件) destdi(目标文件) 复制目录后其文件属性会发生变化想要使得复制之后的目录和原目录完全一样包括文件权限,可以使用c ...

  7. 解决brew update很慢

    一般遇到这种问题,就跟墙有关啦,需要更换源. 用清华的源就非常好,去清华镜像的官网看一下说明,https://mirrors.tuna.tsinghua.edu.cn/help/homebrew/ $ ...

  8. FreeRTOS操作系统，在按键中断函数中恢复被挂起的任务，程序卡死的原因和解决办法

    出现问题场景:       作为刚接触FreeRTOS实时操作系统的菜鸟,我在练习一个程序功能:按键3按下,将LED闪烁的任务挂起:按键4按下,将LED闪烁的任务恢复到就绪.按键使用外部中断.恢复就绪 ...

  9. LInux：网络连接的设置

    主机名的配置 主机名的配置(配置文件/etc/hostname) 1.使用 hostname 命令临时设置主机名 命令格式:hostname [新主机名] 2．永久设置主机名 命令格式:hostnam ...

  10. CGAL的安装与使用

    CGAL CGAL系大名鼎鼎的计算几何算法库,采用C++语言,代码中大量使用模板,相对比较难读.可以支持float, double, CORE的高精度或者gmp等任意精度库. 安装CGAL 在Wind ...