댓글 : HTML5에서 구현 된 알람 클록 코드는 그것을 좋아하는 친구들이 그것을 참조 할 수 있습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<스타일 유형 = "텍스트/CSS">
캔버스 {위치 : 절대; 상단 : 0px; 왼쪽 : 0px;}
</스타일>
<title> 시계 </title>
</head>
<body>
<canvas> </canvas>
<canvas> </canvas>
<script type = "text/javaScript">
// 도면 객체를 가져옵니다
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 높이 = 200, 너비 = 200;
// 큰 원을 그립니다
context.beginpath ();
Context.strokestyle = "#009999";
context.arc (너비/2, 높이/2, 너비/2-1,0, math.pi*2, true);
Context.Stroke ();
context.closepath ();
// 중간 점을 그립니다
context.beginpath ();
Context.FillStyle = "#000";
context.arc (너비/2, 높이/2,3,0, math.pi*2, true);
context.fill ();
context.closepath ();
// 작은 규모를 그립니다
var angle = 0, 반지름 = 너비/2-4;
for (var i = 0; i <60; i ++) {
context.beginpath ();
context.strokestyle = "#000";
// 스케일의 시작점을 확인합니다
var x = 너비/2 + 반경*math.cos (각도), y = height/2 + radius*math.sin (각도);
context.moveto (x, y);
// 이것은 스케일의 또 다른 지점을 중심 지점으로 가리키고 올바른 각도를 제공하는 데 사용됩니다.
// pi는 180도이고 올바른 각도는 각도+180도이며 반대 방향입니다.
var temp_angle = math.pi +각도;
context.lineto (x +3*math.cos (temp_angle), y +3*math.sin (temp_angle));
Context.Stroke ();
context.closepath ();
각도+= 6/180*Math.pi;
}
//대판
각도 = 0, 반경 = 너비/2-4;
context.textBaseline = '중간';
context.textalign = '센터';
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 = 너비/2 + 반경*math.cos (각도), y = height/2 + radius*math.sin (각도);
context.moveto (x, y);
var temp_angle = math.pi +각도;
context.lineto (x +8*math.cos (temp_angle), y +8*math.sin (temp_angle));
Context.Stroke ();
context.closepath ();
// 대규모 텍스트
context.fillText (num, x+16*math.cos (temp_angle), y+16*math.sin (temp_angle));
각도+= 30/180*Math.pi;
}
함수 포인터 () {
var p_type = [[ '#000', 70,1], [ '#ccc', 60,2], [ 'red', 50,3];
함수 drwepointer (유형, 각도) {
유형 = p_type [type];
각도 = 각도*math.pi*2-90/180*Math.pi;
var 길이 = 유형 [1];
p_context.beginpath ();
p_context.linewidth = type [2];
p_context.strokestyle = type [0];
p_context.moveto (너비/2, 높이/2);
p_context.lineto (너비/2 + 길이*math.cos (각도), 높이/2 + 길이*Math.sin (각도));
p_context.stroke ();
p_context.closepath ();
}
setInterval (function () {
p_context.clearRect (0,0, 높이, 너비);
var time = 새 날짜 ();
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 = 새로운 포인터 ();
</스크립트>
</body>
</html>