Copy kode kodenya sebagai berikut:
<!doctypehtml>
<html>
<kepala>
<title>kanvas dClock</title>
</kepala>
<tubuh>
<kanvas id = "jam" lebar = "500px" tinggi = "200px">
Browser Anda terlalu tua, tingkatkan versinya!
</kanvas>
<tipe skrip = "teks/javascript">
var jam = document.getElementById("jam");
var cxt = jam.getContext("2d");
//menampilkan jam digital
fungsi waktu pertunjukan(m, n) {
cxt.clearRect(0, 0, 500, 500);
var sekarang = Tanggal baru;
var jam = sekarang.getHours();
var min = sekarang.getMinutes();
var detik = sekarang.getSeconds();
var msec = sekarang.getMilliseconds();
jam = jam >= 10 ? jam : "0" + jam;
menit = menit >= 10 ? menit : "0" + menit;
detik = detik >= 10 detik : "0" + detik;
mdetik = (mdetik >= 10 && mdetik < 100) ? ("0" + mdetik): (mdetik >= 0 && mdetik < 10) ? ("00" + mdetik): mdetik;
bdigital(m, n, jam);
bdigital(m + 160, n, menit);
bdigital(m + 320, n, detik);
//tdigital(m + 480, n, mdetik);
//Tampilan tiga digit
fungsi tdigital(x, y, angka) {
var ge = angka % 10;
var shi = (parseInt(angka / 10)) % 10;
var bai = parseInt((parseInt(angka / 10)) / 10) % 10;
digital(x, y, bai);
digital(x + 70, y, shi);
digital(x + 140, y, ge);
}
//Tampilan dua digit
fungsi bdigital(x, y, angka) {
var ge = angka % 10;
var shi = (parseInt(angka / 10)) % 10;
digital(x, y, shi);
digital(x + 70, y, ge);
}
//lukisan:
//antara jam dan menit
cxt.lebar garis = 5;
cxt.strokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 140, n + 80, 3, 0, 360, salah);
cxt.isi();
cxt.closePath();
cxt.stroke();
cxt.lebar garis = 5;
cxt.strokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 140, n + 100, 3, 0, 360, salah);
cxt.isi();
cxt.closePath();
cxt.stroke();
//antara menit dan detik
cxt.lebar garis = 5;
cxt.strokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 80, 3, 0, 360, salah);
cxt.isi();
cxt.closePath();
cxt.stroke();
cxt.lebar garis = 5;
cxt.strokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 100, 3, 0, 360, salah);
cxt.isi();
cxt.closePath();
cxt.stroke();
//Satu antara detik dan milidetik.
// cxt.lebar garis = 5;
//cxt.strokeStyle = "#000";
// cxt.fillStyle = "#000";
// cxt.beginPath();
// cxt.arc(m + 460, n + 100, 3, 0, 360, salah);
// cxt.isi();
// cxt.closePath();
// cxt.stroke();
}
//menampilkan satu digit
fungsi digital(x, y, angka) {
//Atur gaya
cxt.lebar garis = 5;
cxt.strokeStyle = "#000";
//A
fungsi a() {
cxt.beginPath();
cxt.moveTo(x, y);
cxt.lineTo(x + 50, y);
cxt.closePath();
cxt.stroke();
}
//B
fungsi b() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 5);
cxt.lineTo(x + 55, y + 55);
cxt.closePath();
cxt.stroke();
}
//C
fungsi c() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 60);
cxt.lineTo(x + 55, y + 110);
cxt.closePath();
cxt.stroke();
}
//D
fungsi d() {
cxt.beginPath();
cxt.moveTo(x + 50, y + 115);
cxt.lineTo(x, y + 115);
cxt.closePath();
cxt.stroke();
}
//e
fungsi e() {
cxt.beginPath();
cxt.moveTo(x - 5, y + 110);
cxt.lineTo(x - 5, y + 60);
cxt.closePath();
cxt.stroke();
}
//F
fungsi f() {
cxt.beginPath();
cxt.moveTo(x - 5, y + 55);
cxt.lineTo(x - 5, y + 5);
cxt.closePath();
cxt.stroke();
}
//G
fungsi g() {
cxt.beginPath();
cxt.moveTo(x, y + 57.5);
cxt.lineTo(x + 50, y + 57.5);
cxt.closePath();
cxt.stroke();
}
//0
fungsi nol() {
sebuah();
}
//1
fungsi satu() {
b();
}
//2
fungsi dua() {
sebuah();
}
//3
fungsi tiga() {
sebuah();
}
//4
fungsi empat() {
b();
}
//5
fungsi lima() {
a(); c();
}
//6
fungsi enam() {
a(); c();
}
//7
fungsi tujuh() {
sebuah();
}
//8
fungsi delapan() {
sebuah();
}
//9
fungsi sembilan() {
sebuah();
}
//Nomor n
nomor fungsi(n) {
beralih (n) {
kasus 0: nol();
kasus 1: satu();
kasus 2: dua();
kasus 3: tiga();
kasus 4: empat();
kasus 5: lima();
kasus 6: enam();
kasus 7: tujuh();
kasus 8: delapan();
kasus 9: sembilan();
}
}
nomor(angka);
}
waktu pertunjukan(1, 45);
setInterval("Waktu pertunjukan(1,45)", 1000);
</skrip>
</tubuh>
</html>