HTML5 canvas 计时器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body >
<canvas id="canvas" style="display:block;margin:50px auto;">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script src="js/digit.js"></script>
<script src="js/countdown.js"></script>
</body>
</html>
js部分
var rr=7;
var wid_width=1024;
var wid_height=500;
var mgl=60;
var mgt=30;
var curt=0;
var balls=[];
const colors=["#669900","#FFBB33","#FF8800","#FF4444"]
window.onload=function(){
var cvs=document.getElementById('canvas');
var cont=cvs.getContext('2d');
cvs.width=wid_width;
cvs.height=wid_height;
curt=getcurt();
setInterval(function(){
render(cont);
update();
},
50)
}
function getcurt(){
var gct=new Date();
var ret = gct.getHours()*3600+gct.getMinutes()*60+gct.getSeconds();
return ret;
}
function update(){
var nxt=getcurt();
var nxh=parseInt(nxt/3600);
var nxm=parseInt((nxt-nxh*3600)/60);
var nxs=parseInt(nxt%60);
var crh=parseInt(curt/3600);
var crm=parseInt((curt-crh*3600)/60);
var crs=parseInt(curt%60);
if(nxs!=crs){
if(parseInt(nxh/10)!=parseInt(crh/10)){
addballs(mgl,mgt,parseInt(crh/10));
}
if(parseInt(nxh%10)!=parseInt(crh%10)){
addballs(mgl+15*(rr+1),mgt,parseInt(crh%10));
}
if(parseInt(nxm/10)!=parseInt(crm/10)){
addballs(mgl+39*(rr+1),mgt,parseInt(crm/10));
}
if(parseInt(nxm%10)!=parseInt(crm%10)){
addballs(mgl+54*(rr+1),mgt,parseInt(crm%10));
}
if(parseInt(nxs/10)!=parseInt(crs/10)){
addballs(mgl+78*(rr+1),mgt,parseInt(crs/10));
}
if(parseInt(nxs%10)!=parseInt(crs%10)){
addballs(mgl+93*(rr+1),mgt,parseInt(crs%10));
}
curt=nxt;
}
updateballs();
}
function updateballs(){
for(var i=0;i<balls.length;i++){
balls[i].x+=balls[i].vx;
balls[i].y+=balls[i].vy;
balls[i].vy+=balls[i].g;
if(wid_height-rr<=balls[i].y){
balls[i].y=wid_height-rr
balls[i].vy=-balls[i].vy*0.7
}
}
var xs=0;
for(var j=0;j<balls.length;j++){
if(balls[j].x+rr>0 && balls[j].x-rr<wid_width){
balls[xs++] = balls[j];
}
}
while(balls.length>xs){
balls.pop();
}
}
function addballs(x,y,num){
for(var i=0;i<digit[num].length;i++){
for(var j=0;j<digit[num][i].length;j++){
if(digit[num][i][j]==1){
var aball={
x:x+j*2*(rr+1)+(rr+1),
y:y+i*2*(rr+1)+(rr+1),
g:1.5+Math.random(),
vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,
vy:-5,
color:colors[Math.floor(Math.random()*4)]
}
balls.push(aball);
}
}
}
}
function render(cxt){
cxt.clearRect(0,0,wid_width,wid_height)
var curh=parseInt(curt/3600);
var curm=parseInt((curt-curh*3600)/60);
var curs=parseInt(curt%60);
readigit(mgl,mgt,parseInt(curh/10),cxt);
readigit(mgl+15*(rr+1),mgt,parseInt(curh%10),cxt);
readigit(mgl+30*(rr+1),mgt,10,cxt);
readigit(mgl+39*(rr+1),mgt,parseInt(curm/10),cxt);
readigit(mgl+54*(rr+1),mgt,parseInt(curm%10),cxt);
readigit(mgl+69*(rr+1),mgt,10,cxt);
readigit(mgl+78*(rr+1),mgt,parseInt(curs/10),cxt);
readigit(mgl+93*(rr+1),mgt,parseInt(curs%10),cxt);
for(var i=0;i<balls.length;i++){
cxt.fillStyle=balls[i].color;
cxt.beginPath();
cxt.arc(balls[i].x,balls[i].y,rr,0,2*Math.PI,true);
cxt.closePath();
cxt.fill();
}
}
function readigit(x,y,num,cxt){
cxt.fillStyle = "rgb(0,102,153)";
for(var i=0;i<digit[num].length;i++)
for(var j=0;j<digit[num][i].length;j++)
if(digit[num][i][j]==1){
cxt.beginPath();
cxt.arc(x+j*2*(rr+1)+(rr+1),y+i*2*(rr+1)+(rr+1),rr,0,2*Math.PI)
cxt.closePath()
cxt.fill()
}
}
js 数字显示部分
digit =
[
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
],//0
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
],//1
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
],//2
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//3
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,1]
],//4
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//5
[
[0,0,0,0,1,1,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//6
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
],//7
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//8
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
],//9
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
]//:
];
