<!DOCTYPE html>

<html>

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

        <canvas id="canvas" width="200" height="200" style="border: 1px solid #000;">Chrome,IE9,IE10,Firefox。</canvas>

        <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 canvas = document.getElementById('canvas');

        var timerId;

        var ctx = canvas.getContext('2d');

        if (ctx) {

            var frameRate = 60;

            function canvObject() {

                this.x = 0;

                this.y = 0;

                this.rotation = 0;

                this.borderWidth = 2;

                this.borderColor = '#000000';

                this.fill = false;

                this.fillColor = '#ff0000';

                this.update = function () {

                    if (!this.ctx) throw new Error('not canvas');

                    var ctx = this.ctx

                    ctx.save();

                    ctx.lineWidth = this.borderWidth;

                    ctx.strokeStyle = this.borderColor;

                    ctx.fillStyle = this.fillColor;

                    ctx.translate(this.x, this.y);

                    if (this.rotation) ctx.rotate(this.rotation * Math.PI / 180);

                    if (this.draw) this.draw(ctx);

                    if (this.fill) ctx.fill();

                    ctx.stroke();

                    ctx.restore();

                }

            };

            function Line() { };

            Line.prototype = new canvObject();

            Line.prototype.fill = false;

            Line.prototype.start = [0, 0];

            Line.prototype.end = [5, 5];

            Line.prototype.draw = function (ctx) {

                ctx.beginPath();

                ctx.moveTo.apply(ctx, this.start);

                ctx.lineTo.apply(ctx, this.end);

                ctx.closePath();

            };

            function Circle() { };

            Circle.prototype = new canvObject();

            Circle.prototype.draw = function (ctx) {

                ctx.beginPath();

                ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);

                ctx.closePath();

            };

            var circle = new Circle();

            circle.ctx = ctx;

            circle.x = 100;

            circle.y = 100;

            circle.radius = 90;

            circle.fill = true;

            circle.borderWidth = 6;

            circle.fillColor = '#ffffff';

            var seconds = new Line();

            seconds.ctx = ctx;

            seconds.x = 100;

            seconds.y = 100;

            seconds.borderColor = "#ff0000";

            seconds.borderWidth = 4;

            seconds.rotation = 0;

            seconds.start = [0, 20];

            seconds.end = [0, -80];

            var center = new Circle();

            center.ctx = ctx;

            center.x = 100;

            center.y = 100;

            center.radius = 5;

            center.fill = true;

            center.borderColor = 'orange';

            for (var i = 0, ls = [], cache; i < 12; i++) {

                cache = ls[i] = new Line();

                cache.ctx = ctx;

                cache.x = 100;

                cache.y = 100;

                cache.borderColor = "orange";

                cache.borderWidth = 2;

                cache.rotation = i * 36;

                cache.start = [0, -70];

                cache.end = [0, -80];

            }

            //clear canvas

            ctx.clearRect(0, 0, 200, 200);

            ctx.fillRect(0, 0, 200, 200);

            circle.update();

            for (var i = 0; cache = ls[i++];) cache.update();

            seconds.update();

            center.update();

        } else {

            alert('error');

        }

        $("#btnstart").live("click", function () {

            var number = 0;

            $("input[name=answer]").attr("disabled", false);

            clearInterval(timerId);

            timerId = setInterval(function () {

                if (number == 10) {

                    clearInterval(timerId);

                    $('#auSound')[0].play();

                    $("input[name=answer]").attr("disabled", true);

                }

                ctx.clearRect(0, 0, 200, 200);

                ctx.fillRect(0, 0, 200, 200);

                circle.update();

                for (var i = 0; cache = ls[i++];) cache.update();

                seconds.rotation = (number++) * 6 * 6;

                seconds.update();

                center.update();

            }, 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>

这个计时器如果超过十秒将播放错误声音，如果回答正确，将播放正确声音

这是效果图：

简单的计时器 (倒计时)--html Demo的更多相关文章

  1. socket.io简单说明及在线抽奖demo

    socket.io简单说明及在线抽奖demo socket.io 简介 Socket.IO可以实现实时双向的基于事件的通信. 它适用于各种平台,浏览器或设备,也同样注重可靠性和速度. socket.i ...

  2. 如何使用AEditor制作一个简单的H5交互页demo

    转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...

  3. 一个简单的MariaDB认证插件demo

    代码地址如下:http://www.demodashi.com/demo/13076.html 一.前言 众所周知(其实可能很多人不知道)MariaDB支持插件认证.在MariaDB中新建用户,常见的 ...

  4. unity3d之简单的时钟倒计时demo

    输入结束时间,开始倒计时,时间差不超过一天,附上代码:(关于个位数显示,加个判断如果小于10 显示的字符串加上0) using System.Collections; using System.Col ...

  5. 也谈SSO，一个简单实用的单点登录Demo

    关于SSO(单点登录),百度百科解释如下 : “SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要 ...

  6. 【Time系列三】简单的计时器(秒表)

    之前在 "for与while的洪荒之力" 中介绍到计时器,不过那样弄感觉好麻烦啊, 碰巧昨天学Java的时候,讲到求余可以用来求时间 ! for与while链接: http://w ...

  7. 一个简单的IM系统（Demo附源码）－－ ESFramework 4.0 快速上手（08）

    前面的文章已经介绍完了基于ESFramework/ESPlus进行二次开发的所有要点,现在,我们可以开始小试牛刀了. 本文将介绍使用ESFramework的Rapid引擎开发的两个最简单的Demo,E ...

  8. MySQL两个最简单的delimiter的使用demo

    今天复习MySQL,使用的工具是Navicat for MySQL,写了两个简单的delimiter的demo. 第一个,获取当前时间的年月日时分秒格式的时间: delimiter $$ drop f ...

  9. 毫秒倒计时小Demo

    Demo截图: Demo:Demo 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta ...

随机推荐

  1. win7安装centos7虚拟机

    1. 场景描述 因测试中需要linux集群,目前的服务器不太方便部署,需要本机(windows7)启动多个linux虚拟机,记录下,希望能帮到需要的朋友. 2. 解决方案 2.1 软件准备 (1)使用 ...

  2. JAVA集合框架（一）-综述

    目录 什么是java集合框架 使用类型安全的容器 集合框架简图 集合类库主要接口简述 Collection接口方法概览 什么是java集合框架 其实就是java类库提供的一套相当完整的各种数据结构的实 ...

  3. java 实现文件下载中文名不显示

    需要将指定字符串的编码转换成浏览器里面的ISO-8859-1编码 String name = new String(name.getBtes("utf-8"),"ISO- ...

  4. java基础(1):java概述、jdk的安装、环境变量的配置、helloworld案例

    1. Java开发环境搭建 1.1 java概述 众所周知Java是一门编程语言,编程语言就是用来编写软件的.那么使用Java到底能用来编写什么软件呢?你所熟知的很多软件都可以用Java来编写,例如: ...

  5. Java每日一面(Part1:计算机网络)[19/10/14]

    作者:故事我忘了￠个人微信公众号:程序猿的月光宝盒 1.1 说一说TCP的四次挥手 ​ "挥手",即终止TCP连接,断开一个TCP连接池. ​ 需要客户端和服务端总共发出四个包,以 ...

  6. Hacking/Penetrating tester bookmark collection

    Blogs http://carnal0wnage.blogspot.com/ http://www.mcgrewsecurity.com/ http://www.gnucitizen.org/blo ...

  7. 转载 could not find a getter for ... in class ... 异常的原因解析

    可能原因如下: 1.真的没有写getter方法(发生几率:1%) 2.*.hmb.xml文件中的属性名和pojo不一致(*.hbm.xml和*.java没衔接好,不一致),字段属性没有正确配置,比如, ...

  8. MySQL问题记录——2003-Can't connect to MySQL server on 'localhost'(10038)

    MySQL问题记录——2003-Can't connect to MySQL server on 'localhost'(10038) 摘要:本文主要记录了连接到MySQL数据库时出现的问题以及解决办 ...

  9. GO 使用静态链接库编译 生成可执行文件 使用第三方 .a 文件，无源码构造

    go build 和 go install 都需要使用源码来进行编译.但是有时候我们只有.a或者.so文件.并不能获取到第三方库的源码,这时我们需要静态链接库编译的技巧: 上图是实验前的文件分布. 使 ...

  10. 电池的QPNP模式

    名词解释: CV:Constant Voltage恒压 SMMB charger:Switch-ModeBattery Charger and Boost peripheral开关模式电池充电器和升压 ...