コメント：html5canvasによって実装された時計、それを参照してください
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> html clock </title>
</head>
<body>
<canvas>
ブラウザはCanvasタグをサポートせず、時間の手を表示できません！
</canvas>
<script type = "text/javascript">
//キャンバスの背景色
var clockbackgroundcolor = "#abcdef";
//時間の手の色
var hourpointcolor = "＃000";
//時間の手の厚さ
var hourpointwidth = 7;
//時間の長さ
var hourpointlength = 100;
//微細な手の色
var minpointcolor = "＃000";
//分の厚さ
var minpointwidth = 5;
//微細な手の長さ
var minpointlength = 150;
//秒針
var secpointcolor = "＃f00";
// 2番目の厚さ
var secpointwidth = 3;
//秒針の長さ
var secpointlength = 170;
//色をダイヤルします
var clockpanelcolor = "#abcdef";
//スケールの色をダイヤルします
var scalecolor = "＃000";
//大規模な幅3 6 9 12をダイヤルします
var scalebigwidth = 9;
//ダイヤルの大規模の長さ
var scalebiglength = 15;
//ダイヤルの幅小規模
var scalesmallwidth = 5;
//ダイヤルの長さは小規模です
var scalesmalllength = 10;
//センターカラー
var centercolor = 'red';
//クロックキャンバス
var clock = document.getElementById（ 'clock'）;
clock.style.background = clockbackgroundcolor;
//時間の手のキャンバスの描画環境（塗装板）
var panel = clock.getContext（ '2d'）;
//行を描画します
/**
*ラインセグメントを描画します
*
*
*/
関数の描画（P、幅、色、startx、starty、endx、endy、ran、cx、cy）{
//着信アートボードを保存します。これは、描画するたびに新しいレイヤーを開くのと同じです
p.save（）;
//ブラシ幅を設定します
p.linewidth = width;
//ブラシの色を設定します
P.Strokestyle = color;
//アートボード上の以前のコンテンツとの干渉を避けるために、描画パスを新しく開きました
P.BeginPath（）;
p.translate（cx、cy）;
//回転
p.rotate（ran）;
//ブラシを開始位置に移動します
p.moveto（startx、starty）;
//ブラシをエンド位置に移動します
P.lineto（Endx、Endy）;
//線図操作
P.Stroke（）;
//後でアートボードに描かれたコンテンツとの干渉を避けるために、描画パスを閉じます
P.ClosePath（）;
//着信アートボードオブジェクトのレイヤーをオーバーレイします
p.Restore（）;
}
/**
*水平線を描きます
*/
関数drawhorizontalline（p、幅、長さ、色、startx、starty、ran、cx、cy）{
ドローライン（p、幅、色、startx、starty、startx+length、starty、ran、cx、cy）;
}
/**
*円を描きます
*/
関数DrawCircle（P、幅、色、Centrex、Centrey、R）{
p.save（）;
//ブラシ幅を設定します
p.linewidth = width;
//ブラシの色を設定します
P.Strokestyle = color;
//アートボード上の以前のコンテンツとの干渉を避けるために、描画パスを新しく開きました
P.BeginPath（）;
//円を描きます
P.ARC（Centrex、Centrey、R、0,360、False）;
//線図操作
P.Stroke（）;
//後でアートボードに描かれたコンテンツとの干渉を避けるために、描画パスを閉じます
P.ClosePath（）;
//着信アートボードオブジェクトのレイヤーをオーバーレイします
p.Restore（）;
}
関数ドローポイント（P、幅、色、センターリックス、センター、r）{
p.save（）;
//ブラシ幅を設定します
p.linewidth = width;
//ブラシの色を設定します
p.fillstyle = color;
//アートボード上の以前のコンテンツとの干渉を避けるために、描画パスを新しく開きました
P.BeginPath（）;
//円を描きます
P.ARC（Centrex、Centrey、R、0,360、False）;
//線図操作
p.fill（）;
//後でアートボードに描かれたコンテンツとの干渉を避けるために、描画パスを閉じます
P.ClosePath（）;
//着信アートボードオブジェクトのレイヤーをオーバーレイします
p.Restore（）;
}
関数ドロースケール（P）{
//小規模を描きます
for（var i = 0; i <60; i ++）{
drawhorizontalline（p、scalesmallwidth、scalesmalllength、scalecolor、195-scalesmalllength、0、i*6*math.pi/180,250,250）;
}
//大規模に描画します
for（var i = 0; i <12; i ++）{
drawhorizontalline（p、i％3 == 0？scalebigwidth*1.2：scalebigwidth、i％3 == 0？scalebiglength*1.2：scalebiglength、scalecolor、195-scalebiglength、0、i*30*math.pi/180,250,250）;
//デジタルスケールを追加できます
}
}
関数drawhourpoint（p、hour）{
drawhorizontalline（p、hourpointwidth、hourpointlength、hourpointcolor、-10,0、（hour-3）*30*math.pi/180,250,250）;
}
関数drawminpoint（p、min）{
Drawhorizontalline（P、MinPointWidth、MinPointLength、MinPointColor、-15,0、（Min-15）*6*Math.Pi/180,250,250）;
}
関数drawsecpoint（p、sec）{
Drawhorizontalline（P、SecPointWidth、secopitelength、secpointcolor、-15,0、（sec-15）*6*math.pi/180,250,250）;
}
関数drawclock（）{
Panel.ClearRect（0,0,500,500）;
panel.filltext（ ""、10,20）;
panel.filltext（ "<a href =" http://www.vevb.com "、10,40"> "、10,40 </a>）;
var date = new Date（）;
var sec = date.getSeconds（）;
var min = date.getMinutes（）;
var hour = date.gethours（） + min/60;
DrawCircle（パネル、7、blue '、250,250,200）;
ドロースケール（パネル）;
drawhourpoint（パネル、時間）;
DrawMinPoint（パネル、Min）;
Drawsecpoint（Panel、sec）;
DrawPoint（パネル、1、CenterColor、250,250,7）;
// drowhorizontalline（パネル、10,10、 'red'、-5,0,0,250,250）;
}
//DROWHORIZONTALLINE(Panel,7,30,'#f00',0,0,0,0,0,0,0,0,250）;
drawclock（）;
setinterval（drowclock、1000）;
function save（）{
var image = clock.todataurl（ "image/png"）。
location.href = image;
}
</script>
</body>
</html>