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

答案:1 悬赏:80

解决时间 2021-11-07 18:45

提问者网友：欲劫无渡
2021-11-07 06:22

最佳答案

二级知识专家网友：往事隔山水
2021-11-07 07:04

复制代码代码如下:<!doctype html><html> <head> <title>canvas dClock</title> </head> <body> <canvas id = "clock" width = "500px" height = "200px"> 您的浏览器太古董了，升级吧！ </canvas> <script type = "text/javascript"> 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 < 100) ? ("0" + msec) : (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 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); </script> </body></html>

我要举报

如以上问答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！