为了账号安全,请及时绑定邮箱和手机立即绑定

麻烦大家帮我看看哪里出错了,谢谢!

var WINDOW_WIDTH = 1024;

var WINDOW_HEIGHT = 768;

var RADIUS = 8;

var MARGIN_TOP = 60;

var MARGIN_LEFT = 30;

 

const endTime=new Date("2018/06/04 20:47:52");

var curShowTimeSeconds=0;


var balls = [];

const colors =["#FFCC00", "#FFCC00", "#CC0033", "#990066", "#990066", "#009966", "#339999", "#669999", "#663366","#336633"]; 



window.onload = function(){


    var canvas = document.getElementById('canvas');

    var context = canvas.getContext("2d");


    canvas.width = WINDOW_WIDTH;

    canvas.height = WINDOW_HEIGHT;

    

    curShowTimeSeconds=getCurrentShowTimeSeconds();

    // render(context); 

    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){

   

    curShowTimeSeconds = nextShowTimeSeconds;

   

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

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

    }

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

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

    }

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

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

    }

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

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

    }

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

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

    }

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

    addBalls(MARGIN_LEFT + 93*(RADIUS+1),MARGIN_TOP,parseInt(nextSeconds%10) );

    }

   

    }

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

            }

}


正在回答

1 回答

第一个地方:WINDOW_HEIGHT_RADIUS这个变量是不是写错了,应该是WINDOW_HEIGHT

第二个地方(可能):截止时间的小时数目最好距离现在100小时之内(课程例子还可以改进)

第三个地方(优化):防止页面小球只增不减,需要对不在画布中的小球进行移除

0 回复 有任何疑惑可以回复我~
#1

qq_沉默_71 提问者

非常感谢!谢谢你
2018-06-10 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

麻烦大家帮我看看哪里出错了,谢谢!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信