<!DOCTYPE?html>
<html>
<head>
??<title>tiral1</title>
</head>
<body>
<canvas?id="canvas"?style="border:?1px?solid?black;margin-top:?60px;margin-left:?30px"></canvas>
<script?src="digit.js"></script>
<script>
var?windowwidth=1200;
var?windowheight=768;
var?radius=8;
var?endTime=new?Date(2016,10,8,18,47,52);
var?curShowTimeSeconds=0;
var?balls=[];
const?colors?=?["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
window.onload=function(){
??var?canvas=document.getElementById("canvas");
??var?context=canvas.getContext("2d");
??canvas.width=windowwidth;
??canvas.height=windowheight;
??curShowTimeSeconds=getCurrentTime();
??setInterval(
????function(){
??????render(context);
??????update();
????}
??,50
??);
}
function?getCurrentTime(){
??var?curTime=new?Date();
??var?ret=endTime.getTime()-curTime.getTime();
??ret=Math.round(ret/1000);
??return?ret>=0??ret:0;
}
function?update(){
??var?nextShowTimeSeconds=getCurrentTime();
??var?nexthours=parseInt(nextShowTimeSeconds/3600);
??var?nextminutes=parseInt((nextShowTimeSeconds-hours*3600)/60);
??var?nextseconds=parseInt(nextShowTimeSeconds%60);
??var?hours=parseInt(curShowTimeSeconds/3600);
??var?minutes=parseInt((curShowTimeSeconds-hours*3600)/60);
??var?seconds=parseInt(curShowTimeSeconds%60);
??if(nextseconds!=seconds){
????if(parseInt(hours/10)!=parseInt(nexthours/10)){
??????addBalls(50,100,parseInt(hours/10));
????}
????if(parseInt(hours%10)!=parseInt(nexthours%10)){
??????addBalls(194,100,parseInt(hours%10));
????}
????if(parseInt(minutes/10)!=parseInt(minutes/10)){
??????addBalls(338+90,100,parseInt(minutes/10));
????}
????if(parseInt(minutes%10)!=parseInt(minutes%10)){
??????addBalls(338+234,100,parseInt(minutes%10));
????}
????if(parseInt(seconds/10)!=parseInt(seconds/10)){
??????addBalls(338+468,100,parseInt(seconds/10));
????}
????if(parseInt(seconds%10)!=parseInt(seconds%10)){
??????addBalls(338+612,100,parseInt(seconds%10));
????}
????curShowTimeSeconds=nextShowTimeSeconds;
??}
??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(balls[i].y>=windowheight-radius){
?????balls[i].y=windowheight-radius;
?????balls[i].vy=-balls[i].vy*0.75;
???}
??}
?}
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*(radius+1)+radius+1,
??????????y:y+i*2*(radius+1)+radius+1,
??????????g:1.5+Math.random(),
??????????vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,
??????????vy:-5,
??????????color:colors[Math.floor(Math.random()*colors.length)]
????????}
????????balls.push(aBall)
??????}
}
function?render(cxt){
??cxt.clearRect(0,0,windowwidth,windowheight);
??var?hours=parseInt(curShowTimeSeconds/3600);
??var?minutes=parseInt((curShowTimeSeconds-hours*3600)/60);
??var?seconds=parseInt(curShowTimeSeconds%60);
??renderDigit(50,100,parseInt(hours/10),cxt);
??renderDigit(194,100,parseInt(hours%10),cxt);
??renderDigit(338,100,parseInt(10),cxt);
??renderDigit(338+90,100,parseInt(minutes/10),cxt);
??renderDigit(338+234,100,parseInt(minutes%10),cxt);
??renderDigit(338+378,100,parseInt(10),cxt);
??renderDigit(338+468,100,parseInt(seconds/10),cxt);
??renderDigit(338+612,100,parseInt(seconds%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,radius,0,2*Math.PI,true);
????cxt.closePath();
????cxt.fill();
??}
}
function?renderDigit(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*(radius+1)+radius+1,y+i*2*(radius+1)+radius+1,radius,0,2*Math.PI);
????????cxt.closePath();
????????cxt.fill();
??????}
??????}
</script>
</body>
</html>
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]
????????]//:
];
2016-11-27
哪里呀,而且怎么連倒計(jì)時(shí)都出不來(lái)了,一直說(shuō)countDown.html:133 Uncaught TypeError: Cannot read property 'length' of undefined
2016-11-24
分號(hào)寫(xiě)出逗號(hào)了
2016-11-07
沒(méi)有,找不出哪里寫(xiě)錯(cuò)了
2016-11-07
我也遇到了這個(gè)問(wèn)題,你的解決了么