<!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. 网易发起“疾风”智造IoT联盟，深化“互联网+先进制造业”发展

    7月26日,2019网易云创峰会在杭州拉开序幕,本次峰会以“连接•洞察•进化”为主题,汇聚行业领袖.技术大咖及业界代表,探讨技术演进与行业应用趋势,研商生态合作升级.共赢未来的道路.上午的主论坛中,网 ...

  2. maven私服的配置使用

    maven的仓库分为本地仓库,远程仓库和私服仓库. 私服仓库一般是公司内部私有的,内部进行维护的.公司员工连接私服,从私服中下载jar,或者将自身的jar传到私服上.私服还可以从中央仓库下载jar,当 ...

  3. ASP.NET MVC教程四：ASP.NET MVC中页面传值的几种方式

    准备 在Models文件夹里面新添加Student实体类,用来模拟从Controller向View传递数据,Student类定义如下: using System; using System.Colle ...

  4. C# detect latest .net framework installed on PC

    static void GetNetVersionDemo() { using (RegistryKey ndpKey = RegistryKey.OpenBaseKey(RegistryHive.L ...

  5. windows 使用 curl 命令

    什么是curl命令? curl是利用URL语法在命令行方式下工作的开源文件传输工具.它被广泛应用在Unix.多种Linux发行版中,并且有DOS和Win32.Win64下的移植版本. 如何在windo ...

  6. 【Untiy】完美解决Untiy Package Manager无限加载的问题

    直接上干货 打开记事本,复制一下zhei个 @echo offset HTTP_PROXY=127.0.0.1set HTTPS_PROXY=127.0.0.1start "" & ...

  7. SQL Server 数据类型详解

    引言 SQL Server是我们日常工作中经常用到的数据库,也是商业系统运用最广泛的数据库之一.如何构建合理.高效.节省空间的数据库?是非常考验程序的基本功底,因为数据库是程序的根基,直接影响着系统效 ...

  8. 42-volume 生命周期管理

    Data Volume 中存放的是重要的应用数据,如何管理 volume 对应用至关重要.前面我们主要关注的是 volume 的创建.共享和使用,本节将讨论如何备份.恢复.迁移和销毁 volume. ...

  9. scp 拷贝 针对软连接的问题

    scp时经常把软连接变成拷贝了两遍,rsync -l可以避免这个问题 1. ln 软连接的scp 我们在系统中,经常用到软连接:当我们从远程机器scp  数据时,这个软连接不会cp过来:而是: 把软连 ...

  10. 如何快速查看 group 对应的id

    最近需要获取group 对应的id 数字号码,突然想不起来怎么获得了,现在在这里进行备忘一下: $ cut -d: -f3 < <(getent group sudo) getent gr ...