简单的计时器 (倒计时)--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 ...

随机推荐

opencv-python图像二值化函数cv2.threshold函数详解及参数cv2.THRESH_OTSU使用
cv2.threshold()函数的作用是将一幅灰度图二值化,基本用法如下: #ret:暂时就认为是设定的thresh阈值,mask:二值化的图像 ret,mask = cv2.threshold(i ...
使用python解析ip地址
前言想要批量将ip地址转换为省份城市.国家或是经纬度?百度上的批量查找每次的容量太小满足不了要求?第三方库神器 - geoip2帮你解决所有烦恼. 准备工作首先安装一下geoip2库, pip i ...
HashMap如何在Java中工作？
通过优锐课学习笔记分享,我们可以看到HashMap问题在工作面试中很常见. 这也是HashMaps在Java内部如何工作的一些深入说明,分享给大家参考学习. HashMap在内部如何工作已成为几乎所有 ...
订单结算submit_order.php扣库存,扣账号金额（学生笔记）
<?php header("Content-type: text/html; charset=utf-8"); session_start(); include_once(& ...
Python进程池multiprocessing.Pool的用法
一.multiprocessing模块 multiprocessing模块提供了一个Process类来代表一个进程对象,multiprocessing模块像线程一样管理进程,这个是multiproce ...
ubuntu上的安装.netcore2.1
.net core 在ubuntu上安装比较容易,依次执行正面语句即可 sudo apt-get install curl curl https://packages.microsoft.com/ke ...
selinux disable
临时关闭: [root@localhost ~]# getenforceEnforcing [root@localhost ~]# setenforce 0[root@localhost ~]# ge ...
Saltstack_使用指南12_配置管理-jinja模板
1. 说明下文的案例是根据上一篇文章进行的修改.因此请优先读取上一章博文内容<Saltstack_使用指南11_配置管理-状态之间依赖关系> 2. 主机规划 salt 版本 [root@ ...
TypeScript 学习笔记（四）
函数: 1.函数是一组一起执行一个任务的语句 2.我们可以把一段可复用的代码放到一起组成函数,从而提高效率 3.函数声明(通过关键字 function 来声明)告诉编译器函数的名称.返回类型和参数 4 ...
mssql sqlserver 如何编写case when 多条件呢?
摘要: 下文讲述case when中多条件的编写方法,如下所示: 实验环境:sql server 2008 R2 case when 多条件编写方法 case when多条件编写语法: case ...

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

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

随机推荐

热门专题