Comentário: O código do Clock de Alarmes implementado no HTML5, amigos que gostam de se referir a ele.
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<style type = "text/css">
tela {posição: absoluto; topo: 0px; esquerda: 0px;}
</style>
<title> relógio </title>
</head>
<Body>
<lVAs> </canvas>
<lVAs> </canvas>
<script type = "text/javascript">
// Obtenha o objeto de desenho
var Canvas = document.getElementById ('Canvas');
var context = Canvas.getContext ('2D');
var p_Canvas = document.getElementById ('p_Canvas');
var p_context = p_canvas.getContext ('2d');
altura var = 200, largura = 200;
// Desenhe um grande círculo
context.BeginPath ();
context.strokestyle = "#009999";
context.arc (largura/2, altura/2, largura/2-1,0, math.pi*2, verdadeiro);
context.stroke ();
context.ClosePath ();
// Desenhe o ponto do meio
context.BeginPath ();
context.fillstyle = "#000";
context.arc (largura/2, altura/2,3,0, math.pi*2, verdadeiro);
context.fill ();
context.ClosePath ();
// Desenhe em pequena escala
var angle = 0, raio = largura/2 - 4;
for (var i = 0; i <60; i ++) {
context.BeginPath ();
context.strokestyle = "#000";
// Confirme o ponto de partida da escala
var x = largura/2 + raio*math.cos (ângulo), y = altura/2 + raio*math.sin (ângulo);
context.moveto (x, y);
// Isso é usado para apontar outro ponto da escala para o ponto central e dar o ângulo correto
// pi é 180 graus, o ângulo correto é ângulo+180 graus, exatamente na direção oposta
var temp_angle = math.pi +ângulo;
context.lineto (x +3*math.cos (temp_angle), y +3*math.sin (temp_angle));
context.stroke ();
context.ClosePath ();
ângulo+= 6/180*math.pi;
}
//Grande escala
ângulo = 0, raio = largura/2 - 4;
context.TextBaseline = 'Middle';
context.TexTalign = 'Center';
context.LineWidth = 2;
for (var i = 0; i <12; i ++) {
var num = i+3> 12? i+3-12: i+3;
context.BeginPath ();
context.strokestyle = "#ffd700";
var x = largura/2 + raio*math.cos (ângulo), y = altura/2 + raio*math.sin (ângulo);
context.moveto (x, y);
var temp_angle = math.pi +ângulo;
context.lineto (x +8*math.cos (temp_angle), y +8*math.sin (temp_angle));
context.stroke ();
context.ClosePath ();
// texto em larga escala
context.fillText (num, x+16*math.cos (temp_angle), y+16*math.sin (temp_angle));
ângulo+= 30/180*math.pi;
}
função pointer () {
var p_type = [['#000', 70,1], ['#ccc', 60,2], ['vermelho', 50,3]];
função drwepointer (tipo, ângulo) {
tipo = p_type [type];
ângulo = ângulo*math.pi*2 - 90/180*math.pi;
Var comprimento = tipo [1];
p_context.beginpath ();
p_context.linewidth = type [2];
p_context.strokestyle = type [0];
p_context.moveto (largura/2, altura/2);
p_context.lineto (largura/2 + comprimento*math.cos (ângulo), altura/2 + comprimento*math.sin (ângulo));
p_context.stroke ();
p_context.closePath ();
}
setInterval (function () {
p_context.clearrect (0,0, altura, largura);
var time = new Date ();
var h = time.gethours ();
var m = time.getminutes ();
var s = time.getSeconds ();
h = h> 12? H-12: H;
h = h+m/60;
h = h/12;
m = m/60;
s = s/60;
drwepointer (0, s);
drwepointer (1, m);
drwepointer (2, h);
}, 500);
}
var p = novo ponteiro ();
</script>
</body>
</html>