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

浏览数：26 / 时间：2015年06月09日

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