html5 캔버스 js(디지털 시계) 예제 code_javascript 기술

코드 복사 코드는 다음과 같습니다. canvas dClock 您的浏览器太古董了，升级吧！ var clock = document.getElementById("clock"); var cxt = clock.getContext("2d"); //显示数字时钟 function showTime(m, n) { cxt.clearRect(0, 0, 500, 500);

var now = new Date; var hour = now.getHours(); var min = now.getMinutes(); var sec = now.getSeconds(); var msec = now.getMilliseconds(); hour = hour >= 10 ? hour : "0" + hour; min = min >= 10 ? min : "0" + min; sec = sec >= 10 ? sec : "0" + sec; msec = (msec >= 10 && msec = 0 && msec < 10) ? ("00" + msec) : msec;

bdigital(m, n, hour); bdigital(m + 160, n, min); bdigital(m + 320, n, sec); //tdigital(m + 480, n, msec);

//三位数的显示 function 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); }

//两位数的显示 function bdigital(x, y, num) { var ge = num % 10; var shi = (parseInt(num / 10)) % 10; digital(x, y, shi); digital(x + 70, y, ge); }

//画： //小时与分钟之间 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.stroke();

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.stroke();

//分钟与秒之间 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.stroke();

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.stroke();

//秒与毫秒之间一个. // 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(); }

//显示一位数字 function digital(x, y, num) { //设置风格 cxt.lineWidth = 5; cxt.strokeStyle = "#000";

//a function a() { cxt.beginPath(); cxt.moveTo(x, y); cxt.lineTo(x + 50, y); cxt.closePath(); cxt.stroke(); }

//b function b() { cxt.beginPath(); cxt.moveTo(x + 55, y + 5); cxt.lineTo(x + 55, y + 55); cxt.closePath(); cxt.stroke(); }

//c function c() { cxt.beginPath(); cxt.moveTo(x + 55, y + 60); cxt.lineTo(x + 55, y + 110); cxt.closePath(); cxt.stroke(); }

//d function d() { cxt.beginPath(); cxt.moveTo(x + 50, y + 115); cxt.lineTo(x, y + 115); cxt.closePath(); cxt.stroke(); }

//e function e() { cxt.beginPath(); cxt.moveTo(x - 5, y + 110); cxt.lineTo(x - 5, y + 60); cxt.closePath(); cxt.stroke(); }

//f function f() { cxt.beginPath(); cxt.moveTo(x - 5, y + 55); cxt.lineTo(x - 5, y + 5); cxt.closePath(); cxt.stroke(); }

//g function g() { cxt.beginPath(); cxt.moveTo(x, y + 57.5); cxt.lineTo(x + 50, y + 57.5); cxt.closePath(); cxt.stroke(); }

//0 function zero() { a(); b(); c(); d(); e(); f(); } //1 function one() { b(); c(); } //2 function two() { a(); b(); d(); e(); g(); } //3 function three() { a(); b(); c(); d(); g(); } //4 function four() { b(); c(); f(); g(); } //5 function five() { a(); c(); d(); f(); g(); } //6 function six() { a(); c(); d(); e(); f(); g(); } //7 function seven() { a(); b(); c(); } //8 function eight() { a(); b(); c(); d(); e(); f(); g(); } //9 function nine() { a(); b(); c(); d(); f(); g(); }

//문자 함수 번호(n) { 스위치(n) { 케이스 0: zero(); break; 사례 1: one(); break; 사례 2: two(); break; 사례 3: three(); break; 사례 4: four(); break; 사례 5: five(); break; 사례 6: six(); break; 사례 7: 7(); break; 사례 8: 여덟(); break; 사례 9: nine(); break; } } 숫자(숫자); }

showTime(1, 45); setInterval("showTime(1,45)", 1000);

html5 캔버스 js(디지털 시계) 예제 code_javascript 기술

관련 기사