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 < 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);

總結

以上是生活随笔為你收集整理的数字时钟html5 js,html5 canvas js(数字时钟)实例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。