次のようにコードをコピーします。
<!doctype html>
<html>
<頭>
<title>キャンバス dClock</title>
</head>
<本文>
<キャンバス ID = "時計" 幅 = "500px" 高さ = "200px">
お使いのブラウザは古すぎます。アップグレードしてください。
</キャンバス>
<スクリプトタイプ = "text/javascript">
var クロック = document.getElementById("クロック");
var cxt = Clock.getContext("2d");
//デジタル時計を表示する
関数 showTime(m, n) {
cxt.clearRect(0, 0, 500, 500);
var now = 新しい日付;
var 時間 = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var msec = now.getMilliseconds();
時間 = 時間 >= 10 ? 時間 : "0" + 時間;
分 = 分 >= 10 ? 分 : "0" + 分;
秒 = 秒 >= 10 秒 : "0" + 秒;
ミリ秒 = (ミリ秒 >= 10 && ミリ秒 < 100) ? ("0" + ミリ秒) : (ミリ秒 >= 0 && ミリ秒 < 10) : ミリ秒;
bdigital(m, n, 時);
bdigital(m + 160, n, 分);
bdigital(m + 320, n, 秒);
//tdigital(m + 480, n, ミリ秒);
//3桁表示
関数 tdigital(x, y, num) {
変数 ge = 数値 % 10;
var shi = (parseInt(num / 10)) % 10;
var bai = parseInt((parseInt(num / 10)) / 10) % 10;
デジタル(x, y, bai);
デジタル(x + 70, y, shi);
デジタル(x + 140, y, ge);
}
//2桁表示
関数 bdigital(x, y, num) {
変数 ge = 数値 % 10;
var shi = (parseInt(num / 10)) % 10;
デジタル(x, y, shi);
デジタル(x + 70, y, ge);
}
//絵画：
// 時間と分の間
cxt.lineWidth = 5;
cxt.ストロークスタイル = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 140, n + 80, 3, 0, 360, false);
cxt.fill();
cxt.closePath();
cxt.ストローク();
cxt.lineWidth = 5;
cxt.ストロークスタイル = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 140, n + 100, 3, 0, 360, false);
cxt.fill();
cxt.closePath();
cxt.ストローク();
// 分と秒の間
cxt.lineWidth = 5;
cxt.ストロークスタイル = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 80, 3, 0, 360, false);
cxt.fill();
cxt.closePath();
cxt.ストローク();
cxt.lineWidth = 5;
cxt.ストロークスタイル = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 100, 3, 0, 360, false);
cxt.fill();
cxt.closePath();
cxt.ストローク();
//秒とミリ秒の間の 1 つ。
// cxt.lineWidth = 5;
// cxt.ストロークスタイル = "#000";
// cxt.fillStyle = "#000";
// cxt.beginPath();
// cxt.arc(m + 460, n + 100, 3, 0, 360, false);
// cxt.fill();
// cxt.closePath();
// cxt.ストローク();
}
// 1桁表示
関数デジタル(x, y, num) {
//スタイルを設定する
cxt.lineWidth = 5;
cxt.ストロークスタイル = "#000";
//
関数 a() {
cxt.beginPath();
cxt.moveTo(x, y);
cxt.lineTo(x + 50, y);
cxt.closePath();
cxt.ストローク();
}
//b
関数 b() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 5);
cxt.lineTo(x + 55, y + 55);
cxt.closePath();
cxt.ストローク();
}
//c
関数 c() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 60);
cxt.lineTo(x + 55, y + 110);
cxt.closePath();
cxt.ストローク();
}
//d
関数 d() {
cxt.beginPath();
cxt.moveTo(x + 50, y + 115);
cxt.lineTo(x, y + 115);
cxt.closePath();
cxt.ストローク();
}
//e
関数 e() {
cxt.beginPath();
cxt.moveTo(x - 5, y + 110);
cxt.lineTo(x - 5, y + 60);
cxt.closePath();
cxt.ストローク();
}
//f
関数 f() {
cxt.beginPath();
cxt.moveTo(x - 5, y + 55);
cxt.lineTo(x - 5, y + 5);
cxt.closePath();
cxt.ストローク();
}
//g
関数 g() {
cxt.beginPath();
cxt.moveTo(x, y + 57.5);
cxt.lineTo(x + 50, y + 57.5);
cxt.closePath();
cxt.ストローク();
}
//0
関数ゼロ() {
a(); b();
}
//1
関数 one() {
b();
}
//2
関数 two() {
a(); b();
}
//3
関数 3() {
a(); b();
}
//4
関数 four() {
b(); c();
}
//5
関数 Five() {
a(); c();
}
//6
関数 six() {
a(); c();
}
//7
関数 seven() {
a(); b();
}
//8
関数 8() {
a(); b();
}
//9
関数 nine() {
a(); b();
}
//数値n
関数番号(n) {
スイッチ (n) {
ケース 0: ゼロ();
ケース 1: one();
ケース 2: two();
ケース 3: スリー();
ケース 4: four();
ケース 5: 5();
ケース 6: six();
ケース 7: seven();
ケース 8: 8();
ケース 9: nine();
}
}
番号(番号);
}
showTime(1, 45);
setInterval("showTime(1,45)", 1000);
</script>
</body>
</html>