html5 canvas js(数字时钟)实例代码_Javascript教程-查字典教程网

复制代码代码如下:

<!doctype html>

<html>

<head>

<title>canvas dClock</title>

</head>

<body>

您的浏览器太古董了，升级吧！

</canvas>

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>