计时 答题 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%); 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的更多相关文章
- 微信答题小程序 微信小程序 答题 demo 头脑王者这样的答题小程序开发 答题的微信小程序开发经验 微信答题比赛小程序
最近随着王思聪的我撒币,我快乐,直播答题非常火.同时知乎的答题小程序头脑王者也非常火爆.大家在微信和微信群里玩的不亦乐乎. 好吧,快乐总是属于你们,我却只能埋头写代码... 公司要求赶紧开发一个这样的 ...
- 软件工程(FZU2015)增补作业
说明 张老师为FZU软件工程2015班级添加了一次增补作业,总分10分,deadline是2016/01/01-2016/01/03 前11次正式作业和练习的迭代评分见:http://www.cnbl ...
- 软件工程(FZU2015) 增补作业
SE_FZU目录:1 2 3 4 5 6 7 8 9 10 11 12 13 说明 张老师为FZU软件工程2015班级添加了一次增补作业,总分10分,deadline是2016/01/01-2016/ ...
- 轻量级通信引擎StriveEngine —— C/S通信demo(2) —— 使用二进制协议 (附源码)
在网络上,交互的双方基于TCP或UDP进行通信,通信协议的格式通常分为两类:文本消息.二进制消息. 文本协议相对简单,通常使用一个特殊的标记符作为一个消息的结束. 二进制协议,通常是由消息头(Head ...
- RCF进程间通信Demo程序
在上一篇文章RPC通信框架--RCF介绍中,介绍了RCF的优点,本篇文章从头开始演示如何用RCF编写一个跨进程通信的Demo程序. 将RCF编译为静态库 从官网下载到的源码中包含一个RCF的项目,但是 ...
- 一道原生js题目引发的思考(鼠标停留区块计时)
我瞎逛个啥论坛,发现了一个题目,于是本着练手的心态就开始写起来了,于是各种问题接踵而至,收获不小. 题目是这样的: Demo: mouseenter与mouseover区别demo 跨浏览器的区块计数 ...
- Direct3D11学习:(四)计时和动画
转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 接触过游戏开发的人都知道,在游戏中,计时器是一个非常重要的工具,用来精确地控制游戏帧数和动画的播放.要正确实现动 ...
- online judge(ACM) 的设计与分析 (有c#demo)
ACM.OJ,算法在线判题系统. 帮朋友完成毕业设计而写的,软件环境windows系统,语言是C# winform(因为我不熟悉asp.net,现在暂用winform写的demo). 看了下其他相关论 ...
- Modelsim的demo入门教程
写在前面的话学过MCU设计的朋友都知道,系统调试是多么的重要.而对于FPGA设计来说,仿真确实最重要的.一个完整的项目,必须有完整的仿真平台.有朋友说,按键仿真模型没法搞. 我只能说,你并不了解硬件及 ...
随机推荐
- SpringData JPA实现增删改
一.创建实体类并自动生成数据库表 二.dao层继承JpaRepository 三.controller中增加操作 四.controller中删除操作 五.controller中修改操作
- ubuntu 18.04多应用窗口切换的快捷键使用指南
前记 使用ubuntu时间长了,很厌烦用鼠标来点来点去.重复操作的,还是快捷键比较方便.在多窗口切换方面,熟悉了几个快捷键之后,顿时感觉神清气爽.这里就推荐给大家学习一下,提高工作效率啊. 常用快捷键 ...
- zabbix通过agent监控linux主机
前言: 前几篇博客分别介绍了通过snmp来进行监控linux主机与windows主机,本篇介绍通过agent客户端来进行系统监控. 环境: server:192.168.249.142 client: ...
- 汇总:ASP.NET Core中HttpContext获取传参数据,有哪些方式
一.原生方式: 1.POST(以ajax请求为案例,教大家用法) $.ajax({ type: "post", dataType: "json", cache: ...
- 7天教你精通变大神,学CAD关键还要掌握方法,纯干货新手要看
接触CAD初期是“痛苦”的,“煎熬”的,也是充满“成就”的. 痛苦是初学者怎么都不懂,需要学习的东西很多,整个过程是有些痛苦的. 煎熬也是每个求学阶段都会遇到的状态,眼睛会了,手不会,这个状态很难受. ...
- 洗牌算法及 random 中 shuffle 方法和 sample 方法浅析
对于算法书买了一本又一本却没一本读完超过 10%,Leetcode 刷题从来没坚持超过 3 天的我来说,算法能力真的是渣渣.但是,今天决定写一篇跟算法有关的文章.起因是读了吴师兄的文章<扫雷与算 ...
- JS中的slice()和splice()的区别以及记忆方式
总结 splice()会改变原来的数组,返回的是被改变的内容,比如说通过splice删掉了某一项,那么返回的是删掉的这一项,当然还是会以数组的形式返回. slice不会对原数组进行改变,会返回一个新的 ...
- SAP会计年度变式
会计年度变式用来确定SAP系统中每个公司的会计记账期间的变式.顾名思议,每个公司的会计年度变式必须与其实际使用的会计年度匹配. 在SAP系统中,每个会计年度最多允许有16个记账期间,其中 ...
- Android 列表对话框 使用数组
添加一个数组 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceSt ...
- 42-volume 生命周期管理
Data Volume 中存放的是重要的应用数据,如何管理 volume 对应用至关重要.前面我们主要关注的是 volume 的创建.共享和使用,本节将讨论如何备份.恢复.迁移和销毁 volume. ...