<!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. 关于dom4j解析XML的问题分享

    最近在在做个程序需要将C#小工具转成java,因为需要涉及到操作xml文件所以需要引用dom4j: 使用dom4j解析XML时,要快速获取某个节点的数据,使用XPath是个不错的方法,dom4j的快速 ...

  2. 【linux命令 】文件特殊权限（SUID、SGID、SBIT）

    chmod 2770 /home/admins,刚看到这个命令,有点不解,后边770分别表示用户,组,其他人,前面的2不知道代表的是什么意思.百度之后发现2是代表八进制数,也是一种权限,它的三个bit ...

  3. 【xAsset框架】HFS 轻量级HTTP Server快速入门指南

    一.引子 最近马三有幸参与开发了一个简易轻量的Unity资源管理框架 xAsset ,xasset 提供了一种使用资源路径的简单的方式来加载资源,简化了Unity项目资源打包,更新,加载,和回收的作业 ...

  4. Docker 系列之 基础入门

    安装 Docker Windows 10 专业版以上版本 Docker for Windows Installer 在安装前,需要确保目标机器已经开启了硬件虚拟化和 HyperV :在安装的过程中建议 ...

  5. InfluxDB从原理到实战 - 一篇文章搞懂InfluxDB时区

    0x00 简介    InfluxDB默认以UTC时间存储并返回时间戳,当接收到一个时序数据记录时,InfluxDB将时间戳从本地时区时间转换为UTC时间并存储,查询时,InfluxDB返回的时间戳对 ...

  6. (转)格拉布斯准则（Grubbs Criterion）处理数据异常

    格拉布斯准则:https://baike.baidu.com/item/%E6%A0%BC%E6%8B%89%E5%B8%83%E6%96%AF%E5%87%86%E5%88%99/3909586 G ...

  7. Selenium(七)：选择框(radio框、checkbox框、select框)

    1. 选择框 本章使用的html代码: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. Flask 教程 第六章：个人主页和头像

    本文翻译自 The Flask Mega-Tutorial Part VI: Profile Page and Avatars 这是Flask Mega-Tutorial系列的第六部分,我将告诉你如何 ...

  9. smobiler自适应不同手机分辨率

    在smobiler中可以通过相对布局或者绝对布局实现自适应不同手机分辨率. 例如实现下图中的布局,图中的布局实际可以分成3个部分,部分1可以使用Title控件,部分2可以使用Panel(在Panel中 ...

  10. Java反射02 : Class对象获取的三种方式和通过反射实例化对象的两种方式

    1.Class对象获取的三种方式 本文转载自:https://blog.csdn.net/hanchao5272/article/details/79361463 上一章节已经说过,一般情况下,Jav ...