2回答

• 

  秋名山车神

  2016-03-08 16:38:18

  已采纳

  你把countdown.js的代码贴出来看看
  

  3 0

  坏骇芓 回复秋名山车神

  小细节问题，代码写错了

  2016-03-09 11:14:11

  共 3 条回复 >

• 

  坏骇芓

  2016-03-08 22:29:31

  /**

   * Created by 赵芳 on 2016/3/6.

   */

  var WINDOW_WIDTH=1024;

  var WINDOW_HEIGHT=768;

  var RADIUS=8;

  var MARGIN_TOP=60;

  var MARGIN_LEFT=30;

  const endTime=new Date(2016,2,9,22,14);

  var curShowTimeSeconds=0;

  
  

  var balls=[];

  const colors=["#FFDEAD","#00868B","#696969","#191970","#00FF00","#4169E1","#008B00","#FFF68F","#E0FFFF","#228B22"];

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

          }

          ,

          50);

  }

  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=nextShowTimeSeconds%60;

  
  

      var curhours=parseInt(curShowTimeSeconds/3600);

      var curminutes=parseInt((curShowTimeSeconds-curhours*3600)/60);

      var curseconds=curShowTimeSeconds%60;

  
  

      if(nextseconds!=curseconds){

          if(parseInt(curhours/10)!=parseInt(nexthours/10)){

              addBolls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curhours/10));

          }

          if(parseInt(curhours%10)!=parseInt(nexthours%10)){

              addBolls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curhours%10));

          }

          if(parseInt(curminutes/10)!=parseInt(nextminutes/10)){

              addBolls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curminutes/10));

          }

          if(parseInt(curminutes%10)!=parseInt(nextminutes%10)){

              addBolls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curminutes%10));

          }

          if(parseInt(curseconds/10)!=parseInt(nextseconds/10)){

              addBolls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curseconds/10));

          }

          if(parseInt(curminutes%10)!=parseInt(nextminutes%10)){

              addBolls(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 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,WINDOW_WIDTH,WINDOW_HEIGHT);

      var hours=parseInt(curShowTimeSeconds/3600);

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

      var seconds=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,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].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();

            }

  }

  
  

  1 0

  秋名山车神

  if(parseInt(curminutes%10)!=parseInt(nextminutes%10)){ addBolls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curseconds%10)); } 这里写错了吧

  2016-03-09 09:35:30

  共 1 条回复 >