<!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. 使用VBA从工作表中读图片，以及给工作表中写文件

    因为工作的原因,需要用到VBA,碰到读图片和写图片: Sub Macro01() '从工作表中保存图片 Application.ScreenUpdating = False Dim pth, shp, ...

  2. ASP.NET MVC教程一：ASP.NET MVC简介

    一.MVC模式简介 MVC模式是一种流行的Web应用架构技术,它被命名为模型-视图-控制器(Model-View-Controller).在分离应用程序内部的关注点方面,MVC是一种强大而简洁的方式, ...

  3. python跳出多重循环的方法

    方法1:自定义异常 # -*- coding:utf-8 -*- """ 功能:python跳出循环 """ # 方法1:自定义异常 cla ...

  4. PlayJava Day013

    今日所学: /* 2019.08.19开始学习,此为补档. */ 1.BufferedImage:是Image的一个子类,两者的主要作用就是将一副图片加载到内存中,即图像缓冲区. 对于本地图片: Fi ...

  5. javaWeb核心技术第三篇之JavaScript第一篇

    - 概述 - JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言 - 作用:给页面添加动态效果,校验用户信息等. - 入门案例 - js和html的整合 - 方式1:内联式 ...

  6. JS MD5 返回二进制格式

    今天靠大佬的帮助,成功的解决了一个弄了好久的问题.起因就是我们要对一个手机号进行加密. 加密方式是把一个字符串进行MD5加密之后,得到原始 16 字符二进制格式.然后把得到的这个字符作为AES的key ...

  7. from __future__ import absolute_import,division,print_function的作用

    绪论: 最近看多的项目中都文件的开头都带引入了三个模块,特地去查了下其作用(注:验证需要在python2的环境下) absolute_import :绝对导入,其作用是导入模块的时候如果在当前项目目录 ...

  8. Saltstack_使用指南17_salt-ssh

    1. 主机规划 salt 版本 [root@salt100 ~]# salt --version salt (Oxygen) [root@salt100 ~]# salt-minion --versi ...

  9. CentOS7 安装frp与开机启动

    1. 下载frp程序文件 https://github.com/fatedier/frp/releases 2. 解压文件 下载后解压到自己的目录,我这里解压到/usr/local/frp: 3. 添 ...

  10. Python虚拟环境导出包安装到另一台电脑的方法

    环境:Windows 版 Python Python 3.6.8可以用自带的命令建立虚拟环境,不用安装另外的如 virtualenv.virtualenvwrapper等工具. python -m v ...