Copiez le code comme suit :
<!doctypehtml>
<html>
<tête>
<title>toile dClock</title>
</tête>
<corps>
<identifiant du canevas = "horloge" largeur = "500px" hauteur = "200px">
Votre navigateur est trop ancien, mettez-le à jour !
</toile>
<type de script = "texte/javascript">
var horloge = document.getElementById("horloge");
var cxt = clock.getContext("2d");
//afficher l'horloge numérique
fonction showTime (m, n) {
cxt.clearRect(0, 0, 500, 500);
var maintenant = nouvelle date ;
var heure = maintenant.getHours();
var min = maintenant.getMinutes();
var sec = maintenant.getSeconds();
var msec = maintenant.getMilliseconds();
heure = heure >= 10 ? heure : "0" + heure ;
min = min >= 10 ? min : "0" + min;
sec = sec >= 10 ? sec : "0" + sec;
ms = (ms >= 10 && ms < 100) ? ("0" + ms) : (ms >= 0 && ms < 10) ("00" + ms) : ms;
bdigital(m, n, heure);
bnumérique(m + 160, n, min);
bnumérique(m + 320, n, sec);
//tdigital(m + 480, n, msec);
//Affichage à trois chiffres
fonction tdigital(x, y, num) {
varge = num % 10 ;
var shi = (parseInt(num / 10)) % 10 ;
var bai = parseInt((parseInt(num / 10)) / 10) % 10;
numérique (x, y, bai);
numérique(x + 70, y, shi) ;
numérique(x + 140, y, ge);
}
//Affichage à deux chiffres
fonction bdigital(x, y, num) {
varge = num % 10 ;
var shi = (parseInt(num / 10)) % 10 ;
numérique (x, y, shi);
numérique(x + 70, y, ge);
}
//peinture:
//entre heures et minutes
cxt.lineWidth = 5 ;
cxt.StrokeStyle = "#000" ;
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 140, n + 80, 3, 0, 360, faux);
cxt.fill();
cxt.closePath();
cxt.AVC();
cxt.lineWidth = 5 ;
cxt.StrokeStyle = "#000" ;
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 140, n + 100, 3, 0, 360, faux);
cxt.fill();
cxt.closePath();
cxt.AVC();
//entre minutes et secondes
cxt.lineWidth = 5 ;
cxt.StrokeStyle = "#000" ;
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 80, 3, 0, 360, faux);
cxt.fill();
cxt.closePath();
cxt.AVC();
cxt.lineWidth = 5 ;
cxt.StrokeStyle = "#000" ;
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 100, 3, 0, 360, faux);
cxt.fill();
cxt.closePath();
cxt.AVC();
//Un entre les secondes et les millisecondes.
// cxt.lineWidth = 5;
// cxt.StrokeStyle = "#000" ;
// cxt.fillStyle = "#000" ;
// cxt.beginPath();
// cxt.arc(m + 460, n + 100, 3, 0, 360, faux);
// cxt.fill();
// cxt.closePath();
// cxt.AVC();
}
//afficher un chiffre
fonction numérique (x, y, num) {
//Définir le style
cxt.lineWidth = 5 ;
cxt.StrokeStyle = "#000" ;
//un
fonction a() {
cxt.beginPath();
cxt.moveTo(x, y);
cxt.lineTo(x + 50, y);
cxt.closePath();
cxt.AVC();
}
//b
fonction b() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 5);
cxt.lineTo(x + 55, y + 55);
cxt.closePath();
cxt.AVC();
}
//c
fonction c() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 60);
cxt.lineTo(x + 55, y + 110);
cxt.closePath();
cxt.AVC();
}
//d
fonction d() {
cxt.beginPath();
cxt.moveTo(x + 50, y + 115);
cxt.lineTo(x, y + 115);
cxt.closePath();
cxt.AVC();
}
//e
fonction e() {
cxt.beginPath();
cxt.moveTo(x - 5, y + 110);
cxt.lineTo(x - 5, y + 60);
cxt.closePath();
cxt.AVC();
}
//f
fonction f() {
cxt.beginPath();
cxt.moveTo(x - 5, y + 55);
cxt.lineTo(x - 5, y + 5);
cxt.closePath();
cxt.AVC();
}
//g
fonction g() {
cxt.beginPath();
cxt.moveTo(x, y + 57,5);
cxt.lineTo(x + 50, y + 57,5);
cxt.closePath();
cxt.AVC();
}
//0
fonction zéro() {
une(); b(); c(); d();
}
//1
fonction un() {
b(); c();
}
//2
fonction deux() {
une(); b(); d(); e();
}
//3
fonction trois() {
une(); b(); c(); d();
}
//4
fonction quatre() {
b();c();f();g();
}
//5
fonction cinq() {
une(); c(); d(); f();
}
//6
fonction six() {
une(); c(); d(); e();
}
//7
fonction sept() {
une();b();c();
}
//8
fonction huit() {
une(); b(); c(); d();
}
//9
fonction neuf() {
une(); b(); c(); d();
}
//Numéro n
numéro de fonction(n) {
commutateur (n) {
cas 0 : zéro(); pause ;
cas 1 : one(); break ;
cas 2 : deux(); break ;
cas 3 : trois(); break ;
cas 4 : quatre();
cas 5 : cinq();
cas 6 : six();
cas 7 : sept(); break ;
cas 8 : huit(); break ;
cas 9 : neuf();
}
}
numéro(num);
}
showTime(1, 45);
setInterval("showTime(1,45)", 1000);
</script>
</corps>
</html>