<!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. 在eclipse中添加jdk源码

    window->Preferences->java->Installed JREs 点击你的jre然后点右边的Edit 找到以rt.jar结尾的jar,点击右边的Source Att ...

  2. 利用Python进行数据分析-Pandas(第四部分-数据清洗和准备)

    在数据分析和建模的过程中,相当多的时间要用在数据准备上:加载.清理.转换以及重塑上.这些工作会占到分析时间的80%或更多.有时,存储在文件和数据库中的数据的格式不适合某个特定的任务.研究者都选择使用编 ...

  3. 【开发工具】IDEA简明使用指南

    目录 1. 搭建idea的开发环境 2. 调试技巧 3. 常用快捷键(小技巧) 4. 插件推荐 工欲善其事,必先利其器.在Java开发中挑选一款好的Ide环境能大大提升我们的开发效率,IntelliJ ...

  4. Android给Viewpager默认指定页

    上结果代码 private void setViewPaperItem(int position) { try { Class c = Class.forName("android.supp ...

  5. [WPF 自定义控件]开始一个自定义控件库项目

    1. 目标 我实现了一个自定义控件库,并且打算用这个控件库作例子写一些博客.这个控件库主要目标是用于教学,希望通过这些博客初学者可以学会为自己或公司创建自定义控件,并且对WPF有更深入的了解. 控件库 ...

  6. JavaScript中的this绑定丢失及解决方法

    经常犯的错误:混淆了this绑定规则. 代码如下: var obj = { id: 'vexekefo', cool() { console.log(this.id); } }; var id = ' ...

  7. 【Swift】WKWebView与JS的交互使用

    一.前言 近日,有朋友问我关于WKWebView与JS的交互问题,可我之前一直使用的是UIWebView,也不曾做过WKWebView的交互啊!接下来大家一块学习下WKWebView是怎么实现原生代码 ...

  8. opencv-python图像处理基础（一）

    #一.读取图像数据 import cv2 img=cv2.imread("d:/image0.JPG") #读取图片数据 print(img) cv2.imshow('image' ...

  9. Android 中的style和Theme的使用

    说明 style和theme的定义是为了改变原有系统设定的默认窗体.字体.背景色.格式等风格而使用.其本质就是系统属性的集合.本篇主要介绍android中的style和theme的具体用法. styl ...

  10. 树莓派 raspbian Linux 系统命令行 快捷键

    在 Linux 下使用命令操作的时候,光标的移动令人头痛.命令输入完了,执行之后发现缺少权限,然后不得不移动光标到行首加 sudo,而命令又极长……当我学会了命令行相关的快捷键之后,不仅效率提高了,更 ...