<!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>
这个计时器如果超过十秒将播放错误声音，如果回答正确，将播放正确声音
这是效果图：
时间： 2024-08-03 21:45:07