ความคิดเห็น: รหัสนาฬิกาปลุกที่ใช้งานภายใต้ HTML5 เพื่อนที่ชอบมันสามารถอ้างถึงได้
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<style type = "text/css">
Canvas {ตำแหน่ง: Absolute; Top: 0px; ซ้าย: 0px;}
</style>
<title> นาฬิกา </title>
</head>
<body>
<Canvas> </sanvas>
<Canvas> </sanvas>
<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 ();
บริบท closepath ();
// วาดจุดกึ่งกลาง
Context.BeginPath ();
Context.FillStyle = "#000";
Context.arc (ความกว้าง/2, ความสูง/2,3,0, math.pi*2, true);
Context.fill ();
บริบท closepath ();
// วาดขนาดเล็ก
VAR ANGLE = 0, RADIUS = WIDTH/2 - 4;
สำหรับ (var i = 0; i <60; i ++) {
Context.BeginPath ();
Context.strokestyle = "#000";
// ยืนยันจุดเริ่มต้นของมาตราส่วน
var x = ความกว้าง/2 + รัศมี*math.cos (มุม), y = ความสูง/2 + รัศมี*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 ();
บริบท closepath ();
มุม+= 6/180*math.pi;
-
// ขนาดใหญ่
มุม = 0, รัศมี = ความกว้าง/2 - 4;
context.textBaseline = 'middle';
Context.TextAlign = 'Center';
Context.lineWidth = 2;
สำหรับ (var i = 0; i <12; i ++) {
var num = i+3> 12? ฉัน+3-12: ฉัน+3;
Context.BeginPath ();
Context.strokestyle = "#ffd700";
var x = ความกว้าง/2 + รัศมี*math.cos (มุม), y = ความสูง/2 + รัศมี*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 ();
บริบท 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], ['สีแดง', 50,3]];
ฟังก์ชั่น drwepointer (ประเภท, มุม) {
type = p_type [type];
มุม = มุม*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 (ความกว้าง/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 = วันที่ใหม่ ();
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 = ตัวชี้ใหม่ ();
</script>
</body>
</html>