Komentar: Kode jam alarm yang diimplementasikan di bawah HTML5, teman -teman yang menyukainya dapat merujuknya.
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<type style = "text/css">
Canvas {Position: Absolute; Top: 0px; kiri: 0px;}
</tyle>
<title> jam </iteme>
</head>
<body>
<Canvas> </an Canvas>
<Canvas> </an Canvas>
<type skrip = "Teks/JavaScript">
// Dapatkan objek gambar
var canvas = document.geteLementById ('canvas');
var context = canvas.getContext ('2d');
var p_canvas = document.getElementById ('p_canvas');
var p_context = p_canvas.getContext ('2d');
var tinggi = 200, lebar = 200;
// Gambarlah lingkaran besar
context.beginpath ();
Context.strokestyle = "#009999";
context.arc (lebar/2, tinggi/2, lebar/2-1,0, math.pi*2, true);
Context.stroke ();
context.closepath ();
// Gambarlah titik tengah
context.beginpath ();
context.fillstyle = "#000";
context.arc (lebar/2, tinggi/2,3,0, math.pi*2, true);
context.fill ();
context.closepath ();
// Gambarlah skala kecil
var sudut = 0, radius = lebar/2 - 4;
untuk (var i = 0; i <60; i ++) {
context.beginpath ();
context.strokestyle = "#000";
// Konfirmasikan titik awal skala
var x = lebar/2 + radius*math.cos (sudut), y = tinggi/2 + radius*math.sin (sudut);
context.moveto (x, y);
// Ini digunakan untuk mengarahkan titik lain dari skala ke titik tengah dan memberikan sudut yang benar
// pi adalah 180 derajat, sudut yang benar adalah sudut+180 derajat, hanya arah yang berlawanan
var temp_angle = math.pi +sudut;
context.lineto (x +3*math.cos (temp_angle), y +3*math.sin (temp_angle));
Context.stroke ();
context.closepath ();
sudut+= 6/180*math.pi;
}
// skala besar
sudut = 0, radius = lebar/2 - 4;
context.textBaseline = 'tengah';
context.textAlign = 'center';
context.linewidth = 2;
untuk (var i = 0; i <12; i ++) {
var num = i+3> 12? I+3-12: i+3;
context.beginpath ();
context.strokestyle = "#ffd700";
var x = lebar/2 + radius*math.cos (sudut), y = tinggi/2 + radius*math.sin (sudut);
context.moveto (x, y);
var temp_angle = math.pi +sudut;
context.lineto (x +8*math.cos (temp_angle), y +8*math.sin (temp_angle));
Context.stroke ();
context.closepath ();
// Teks skala besar
context.fillText (num, x+16*math.cos (temp_angle), y+16*math.sin (temp_angle));
Angle+= 30/180*Math.pi;
}
fungsi pointer () {
var p_type = ['#000', 70,1], ['#ccc', 60,2], ['merah', 50,3]];
fungsi drwepointer (type, sudut) {
type = p_type [type];
Angle = Angle*Math.pi*2 - 90/180*Math.pi;
var length = type [1];
p_context.beginpath ();
p_context.linewidth = type [2];
p_context.strokestyle = type [0];
p_context.moveto (lebar/2, tinggi/2);
p_context.lineto (lebar/2 + panjang*math.cos (sudut), tinggi/2 + panjang*math.sin (sudut));
p_context.stroke ();
p_context.closePath ();
}
setInterval (function () {
p_context.clearrect (0,0, tinggi, lebar);
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 = pointer baru ();
</script>
</body>
</html>