简单的计时器 (倒计时)--html Demo

<!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的更多相关文章

socket.io简单说明及在线抽奖demo
socket.io简单说明及在线抽奖demo socket.io 简介 Socket.IO可以实现实时双向的基于事件的通信. 它适用于各种平台,浏览器或设备,也同样注重可靠性和速度. socket.i ...
如何使用AEditor制作一个简单的H5交互页demo
转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...
一个简单的MariaDB认证插件demo
代码地址如下:http://www.demodashi.com/demo/13076.html 一.前言众所周知(其实可能很多人不知道)MariaDB支持插件认证.在MariaDB中新建用户,常见的 ...
unity3d之简单的时钟倒计时demo
输入结束时间,开始倒计时,时间差不超过一天,附上代码:(关于个位数显示,加个判断如果小于10 显示的字符串加上0) using System.Collections; using System.Col ...
也谈SSO，一个简单实用的单点登录Demo
关于SSO(单点登录),百度百科解释如下 : “SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要 ...
【Time系列三】简单的计时器(秒表)
之前在 "for与while的洪荒之力" 中介绍到计时器,不过那样弄感觉好麻烦啊, 碰巧昨天学Java的时候,讲到求余可以用来求时间 ! for与while链接: http://w ...
一个简单的IM系统（Demo附源码）－－ ESFramework 4.0 快速上手（08）
前面的文章已经介绍完了基于ESFramework/ESPlus进行二次开发的所有要点,现在,我们可以开始小试牛刀了. 本文将介绍使用ESFramework的Rapid引擎开发的两个最简单的Demo,E ...
MySQL两个最简单的delimiter的使用demo
今天复习MySQL,使用的工具是Navicat for MySQL,写了两个简单的delimiter的demo. 第一个,获取当前时间的年月日时分秒格式的时间: delimiter $$ drop f ...
毫秒倒计时小Demo
Demo截图: Demo:Demo 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta ...

随机推荐

Java，该学什么？
本人大学学的是生物技术专业,毕业后入坑Java. 最近有人问我是如何转行的,需要学一些什么.我在网上看到一篇帖子,觉得写得很全.如果是我来写,可能还写不了这么全的.在此分享给网友. 2019秋招几个月 ...
DBCC TRACEON - 跟踪标志 (Transact-SQL)
跟踪标志用于设置特定服务器特征或更改特定行为. 例如,跟踪标志 3226 是一种常用的启动跟踪标志,可取消显示错误日志中的成功备份消息. 跟踪标志经常用于诊断性能问题或调试存储过程或复杂的计算机系统, ...
go语言的json
简介 json 中提供的处理 json 的标准包是 encoding/json,主要使用的是以下两个方法: // 序列化 func Marshal(v interface{}) ([]byte, er ...
java基础(6):方法
1. 方法 1.1 方法概述在我们的日常生活中,方法可以理解为要做某件事情,而采取的解决办法. 如:小明同学在路边准备坐车来学校学习.这就面临着一件事情(坐车到学校这件事情)需要解决,解决办法呢?可 ...
自学_JAVASCRIPT<四>
自学_JAVASCRIPT 什么是JAVASCRIPT HTML只是描述网页长相的标记语言,没有计算.判断能力,如果所有计算.判断(比如判断文本框是否为空.判断两次密码是否输入一致)都放到服务器端执行 ...
PHP SimpleXMLElement::__toString SimpleXML 函数
定义和用法 SimpleXMLElement::__toString - 返回字符串内容版本支持 PHP4 PHP5 PHP7 不支持支持支持语法 SimpleXMLElement::__to ...
RabbitMQ的第一次亲密接触
企业应用系统,如果系统之间的通信.集成与整合,尤其当面临异构系统时,那么需要分布式的调用与通信.系统中一般会有很多对实时性要求不高但零零碎碎且耗时的地方,比如发送短信,邮件提醒,记录用户操作日志等,在 ...
LayUi 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,之前我修改一版是通过reload重载实例方法填充子节点数据方式,因为递归页面元素时存 ...
JS基础语法----Math对象
推荐查看MDN----在线的帮助文档实例对象: 通过构造函数创建出来,实例化的对象静态对象: 不需要创建,直接就是一个对象,方法(静态方法)直接通过这个对象名字调用实例方法必须通过实例对 ...
Java反射01 : 概念、入门示例、用途及注意事项
1.Java反射定义本文转载自:https://blog.csdn.net/hanchao5272/article/details/79360452 官方定义如下: Reflection enabl ...

简单的计时器 (倒计时)--html Demo

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

随机推荐

热门专题