1回答

• 

  qq_T_T若是人间四月天_0

  2016-03-15 22:37:55

  var WINDOW_WIDTH=1024;

  var WINDOW_HEIGHT=768;

  var RADIUS=8;

  var MARGIN_LEFT=30;

  var MARGIN_TOP=60;

  
  

  const endTime=new Date(2016,2,17,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=WINDOW_WIDTH;

  canvas.height=WINDOW_HEIGHT;

  curShowTimeSeconds=getCurrentSHowTimeSeconds();

  setInterval(

  function(){

  render(context);

  update();

  },

  60

  );

  }

  
  

  function getCurrentSHowTimeSeconds(){

  var curTime=new Date();

  var ret=endTime.getTime()-curTime.getTime();

  ret=Math.round(ret/1000);

  return ret>=0?ret:0;

  }

  function update(){

  var nextShowTimeSeconds=getCurrentSHowTimeSeconds();

  var nextHours=parseInt(nextShowTimeSeconds/3600);

  var nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60);

  var nextSeconds=parseInt(nextShowTimeSeconds%60);

  var curHours=parseInt(curShowTimeSeconds/3600);

  var curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60);

  var curSeconds=parseInt(curShowTimeSeconds%60);

  if(nextSeconds!=curSeconds){

  if(parseInt(nextHours/10)!=parseInt(curHours/10)){

  addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours/10));

  }

  if(parseInt(nextHours%10)!=parseInt(curHours%10)){

  addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));

  }

  if(parseInt(nextMinutes/10)!=parseInt(curMinutes/10)){

  addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));

  }

  if(parseInt(nextMinutes%10)!=parseInt(curMinutes%10)){

  addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));

  }

  if(parseInt(nextSeconds/10)!=parseInt(curSeconds/10)){

  addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));

  }

  if(parseInt(nextSeconds%10)!=parseInt(curSeconds%10)){

  addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%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>=WINDOW_HEIGHT-RADIUS){

  balls[i].y=WINDOW_HEIGHT-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 aBalls={

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

  }

  }

  }

  }

  function render(cxt){

  cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);

  var hours=parseInt(curShowTimeSeconds/3600);

  var minutes=parseInt((curShowTimeSeconds-hours*3600)/60);

  var seconds=parseInt(curShowTimeSeconds%60);

  renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);

  renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);

  renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);

  renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);

  renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);

  renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,cxt);

  renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);

  renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);

  for(var i=0;i<balls.length;i++){

  cxt.fillStyle=balls[i].color;

  cxt.beginPath();

  cxt.arc(balls[i].x,ball[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();

  }

  }

  }

  }

  
  

  0 0