Kopieren Sie den Codecode wie folgt:
<!doctype html>
<html>
<Kopf>
<title>canvas dClock</title>
</head>
<Körper>
<canvas id = "clock" width = "500px" height = "200px">
Ihr Browser ist zu alt, aktualisieren Sie ihn!
</canvas>
<script type = "text/javascript">
var clock = document.getElementById("clock");
var cxt = clock.getContext("2d");
//Digitaluhr anzeigen
Funktion showTime(m, n) {
cxt.clearRect(0, 0, 500, 500);
var now = neues Datum;
var Stunde = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var msec = now.getMilliseconds();
Stunde = Stunde >= 10 ? Stunde : „0“ + Stunde;
min = min >= 10 ? min : "0" + min;
Sek = Sek >= 10 ? Sek : "0" + Sek;
ms = (ms >= 10 && ms < 100) ? ("0" + ms) : (ms >= 0 && ms < 10) : ms;
bdigital(m, n, Stunde);
bdigital(m + 160, n, min);
bdigital(m + 320, n, sec);
//tdigital(m + 480, n, msec);
//Dreistellige Anzeige
Funktion tdigital(x, y, num) {
var ge = num % 10;
var shi = (parseInt(num / 10)) % 10;
var bai = parseInt((parseInt(num / 10)) / 10) % 10;
digital(x, y, bai);
digital(x + 70, y, shi);
digital(x + 140, y, ge);
}
//Zweistellige Anzeige
Funktion bdigital(x, y, num) {
var ge = num % 10;
var shi = (parseInt(num / 10)) % 10;
digital(x, y, shi);
digital(x + 70, y, ge);
}
//Malerei:
//zwischen Stunden und Minuten
cxt.lineWidth = 5;
cxt.StrokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 140, n + 80, 3, 0, 360, false);
cxt.fill();
cxt.closePath();
cxt.streich();
cxt.lineWidth = 5;
cxt.StrokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 140, n + 100, 3, 0, 360, false);
cxt.fill();
cxt.closePath();
cxt.streich();
//zwischen Minuten und Sekunden
cxt.lineWidth = 5;
cxt.StrokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 80, 3, 0, 360, false);
cxt.fill();
cxt.closePath();
cxt.streich();
cxt.lineWidth = 5;
cxt.StrokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 100, 3, 0, 360, false);
cxt.fill();
cxt.closePath();
cxt.streich();
//Eins zwischen Sekunden und Millisekunden.
// cxt.lineWidth = 5;
// cxt.StrokeStyle = "#000";
// cxt.fillStyle = "#000";
// cxt.beginPath();
// cxt.arc(m + 460, n + 100, 3, 0, 360, false);
// cxt.fill();
// cxt.closePath();
// cxt.Stroke();
}
//eine Ziffer anzeigen
Funktion digital(x, y, num) {
//Stil festlegen
cxt.lineWidth = 5;
cxt.StrokeStyle = "#000";
//A
Funktion a() {
cxt.beginPath();
cxt.moveTo(x, y);
cxt.lineTo(x + 50, y);
cxt.closePath();
cxt.streich();
}
//B
Funktion b() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 5);
cxt.lineTo(x + 55, y + 55);
cxt.closePath();
cxt.streich();
}
//C
Funktion c() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 60);
cxt.lineTo(x + 55, y + 110);
cxt.closePath();
cxt.streich();
}
//D
Funktion d() {
cxt.beginPath();
cxt.moveTo(x + 50, y + 115);
cxt.lineTo(x, y + 115);
cxt.closePath();
cxt.streich();
}
//e
Funktion e() {
cxt.beginPath();
cxt.moveTo(x - 5, y + 110);
cxt.lineTo(x - 5, y + 60);
cxt.closePath();
cxt.streich();
}
//F
Funktion f() {
cxt.beginPath();
cxt.moveTo(x - 5, y + 55);
cxt.lineTo(x - 5, y + 5);
cxt.closePath();
cxt.streich();
}
//G
Funktion g() {
cxt.beginPath();
cxt.moveTo(x, y + 57,5);
cxt.lineTo(x + 50, y + 57,5);
cxt.closePath();
cxt.streich();
}
//0
Funktion null() {
a(); b(); c(); e();
}
//1
Funktion eins() {
b(); c();
}
//2
Funktion zwei() {
a(); b(); d();
}
//3
Funktion three() {
a(); b(); c();
}
//4
Funktion vier() {
b(); c(); f();
}
//5
Funktion five() {
a(); c(); d();
}
//6
Funktion six() {
a(); c(); e();
}
//7
Funktion seven() {
a(); b(); c();
}
//8
Funktion acht() {
a(); b(); d();
}
//9
Funktion nine() {
a(); b(); d();
}
//Nummer n
Funktionsnummer(n) {
Schalter (n) {
Fall 0: null(); break;
Fall 1: one(); break;
Fall 2: two(); break;
Fall 3: three(); break;
Fall 4: four(); break;
Fall 5: five(); break;
Fall 6: six(); break;
Fall 7: seven(); break;
Fall 8: acht(); break;
Fall 9: nine(); break;
}
}
Zahl(num);
}
showTime(1, 45);
setInterval("showTime(1,45)", 1000);
</script>
</body>
</html>