다음과 같이 코드 코드를 복사합니다.
<!doctype html>
<html>
<머리>
<title>캔버스 dClock</title>
</head>
<본문>
<캔버스 ID = "시계" 너비 = "500px" 높이 = "200px">
브라우저가 너무 오래되었습니다. 업그레이드하세요!
</캔버스>
<스크립트 유형 = "텍스트/자바스크립트">
var clock = 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" + 초;
msec = (msec >= 10 && msec < 100) ? ("0" + msec) : (msec >= 0 && msec < 10) ? ("00" + msec) : msec;
bdigital(m, n, 시간);
bdigital(m + 160, n, 최소);
bdigital(m + 320, n, 초);
//tdigital(m + 480, n, msec);
//3자리 표시
함수 tdigital(x, y, num) {
var ge = 숫자 % 10;
var shi = (parseInt(num / 10)) % 10;
var bai = parseInt((parseInt(num / 10)) / 10) % 10;
디지털(x, y, bai);
디지털(x + 70, y, 시);
디지털(x + 140, y, ge);
}
//두자리 표시
함수 bdigital(x, y, num) {
var ge = 숫자 % 10;
var shi = (parseInt(num / 10)) % 10;
디지털(x, y, 시);
디지털(x + 70, y, ge);
}
//그림:
//시간과 분 사이
cxt.lineWidth = 5;
cxt.StrokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 140, n + 80, 3, 0, 360, 거짓);
cxt.fill();
cxt.closePath();
cxt.스트로크();
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.스트로크();
//분에서 초 사이
cxt.lineWidth = 5;
cxt.StrokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 80, 3, 0, 360, 거짓);
cxt.fill();
cxt.closePath();
cxt.스트로크();
cxt.lineWidth = 5;
cxt.StrokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 100, 3, 0, 360, 거짓);
cxt.fill();
cxt.closePath();
cxt.스트로크();
//초와 밀리초 사이의 1입니다.
// 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.스트로크();
}
//한자리 숫자 표시
함수 디지털(x, y, num) {
//스타일 설정
cxt.lineWidth = 5;
cxt.StrokeStyle = "#000";
//에이
함수 a() {
cxt.beginPath();
cxt.moveTo(x, y);
cxt.lineTo(x + 50, y);
cxt.closePath();
cxt.스트로크();
}
//비
함수 b() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 5);
cxt.lineTo(x + 55, y + 55);
cxt.closePath();
cxt.스트로크();
}
//기음
함수 c() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 60);
cxt.lineTo(x + 55, y + 110);
cxt.closePath();
cxt.스트로크();
}
//디
함수 d() {
cxt.beginPath();
cxt.moveTo(x + 50, y + 115);
cxt.lineTo(x, y + 115);
cxt.closePath();
cxt.스트로크();
}
//이자형
함수 e() {
cxt.beginPath();
cxt.moveTo(x - 5, y + 110);
cxt.lineTo(x - 5, y + 60);
cxt.closePath();
cxt.스트로크();
}
//에프
함수 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();c();e();
}
//1
함수 1() {
b();c();
}
//2
함수 2() {
a();b();e();
}
//3
함수 3() {
a();b();d();
}
//4
함수 4() {
b();c();g();
}
//5
함수 5() {
a();c();f();
}
//6
함수 6() {
a();c();e();
}
//7
함수 7() {
a();b();
}
//8
함수 8() {
a();c();e();
}
//9
함수 9() {
a();b();d();
}
//번호 n
함수번호(n) {
스위치 (n) {
사례 0: zero();
사례 1: one();
사례 2: two();
사례 3: three();
사례 4: four();
사례 5: five();
사례 6: six();
사례 7: 7();
사례 8: 여덟();
사례 9: nine();
}
}
숫자(num);
}
쇼타임(1, 45);
setInterval("showTime(1,45)", 1000);
</script>
</body>
</html>