html5 canvas js(数字时钟)实例代码_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 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 function number(n) { switch (n) { case 0: zero(); break; case 1: one(); break; case 2: two(); break; case 3: three(); break; case 4: four(); break; case 5: five(); break; case 6: six(); break; case 7: seven(); break; case 8: eight(); break; case 9: nine(); break; } } number(num); } showTime(1, 45); setInterval("showTime(1,45)", 1000);

html5 canvas js(数字时钟)实例代码_javascript技巧

Artikel berkaitan