问答详情
源自:4-3 华丽的小球滚动效果

update()中 nextSeconds != cutSeconds,始终为 false,该如何解决?

    const WINDOW_WIDTH = 1100;  
    const WINDOW_HEIGHT = 900;     
    const RADIUS = 6;
    const TOP = 60;
    const LEFT = 60;
    var endTime = new Date(2015,8,22,0,0,0);
    var cutTimeSeconds = 0;
    var balls = [];
    var colors = ["#33b5e5","#0099cc","#aa66cc","#9933cc","#99cc00","#669900","#ff8800","#ff4444","#cc0000","ffbb33"];

    /****************************************************************************************************window.onload*/
    window.onload = function(){
        
        var canvas = document.getElementById('canvas');                

        var context = canvas.getContext('2d');                                
            
        canvas.width = WINDOW_WIDTH;            
        canvas.height = WINDOW_HEIGHT;          
        cutTimeSeconds = getCutTimeSeconds();
        setInterval(function(){ render(context); update();}, 1000/60);                                                            
    };
    /****************************************************************************************************getCutTimeSeconds()*/
    function getCutTimeSeconds(){
        var nowTime = new Date();
        var ret = endTime.getTime() - nowTime.getTime();
        ret = Math.round(ret/1000);
        return ret >= 0 ? ret : 0;
    };

    /**************************************************************************************************************update()*/
    function update(){
        
        var nextTimeSeconds = getCutTimeSeconds();
                //        下一秒需要变化的时间
        
        var nextHours = parseInt(nextTimeSeconds / 3600);    
        var nextMinutes = parseInt((nextTimeSeconds - nextHours*3600) / 60);        
        var nextSeconds = parseInt(nextTimeSeconds%60);                                                                    

        var cutHours = parseInt(cutTimeSeconds / 3600);        
        var cutMinutes = parseInt((cutTimeSeconds - cutHours*3600) / 60);        
        var cutSeconds = parseInt(cutTimeSeconds%60);    

        if (nextSeconds != cutSeconds)
        {

            if (parseInt(cutHours/10) != parseInt(nextHours/10)) 
            {
                addBall(LEFT , TOP , parseInt(cutHours/10));
            };

            if (parseInt(cutHours%10) != parseInt(nextHours%10)) 
            {
                addBall(LEFT+15*(RADIUS+1) , TOP , parseInt(cutHours%10));
            };



            if (parseInt(cutMinutes/10) != parseInt(nextMinutes/10)) 
            {
                addBall(LEFT+40*(RADIUS+1) , TOP , parseInt(cutMinutes/10));
            };

            if (parseInt(cutMinutes%10) != parseInt(nextMinutes%10)) 
            {
                addBall(LEFT+55*(RADIUS+1) , TOP , parseInt(cutMinutes%10));
            };



            if (parseInt(cutSeconds/10) != parseInt(nextSeconds/10)) 
            {
                addBall(LEFT+80*(RADIUS+1) , TOP , parseInt(cutSeconds/10));
            };
            if (parseInt(cutSeconds%10) != parseInt(nextSeconds%10)) 
            {
                addBall(LEFT+95*(RADIUS+1) , TOP , parseInt(cutSeconds%10));
            };


            cutTimeSeconds = nextTimeSeconds;
        }
        updateBalls();
    }
    /*********************************************************************************************************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].a;

            if (balls[i].y >= WINDOW_HEIGHT - RADIUS) 
                //    判断底部边缘的碰撞事件
            {
                balls[i].y = WINDOW_HEIGHT - RADIUS;
                balls[i].vy = -balls[i].vy*0.75;
            };
        };
    }


   
    function addBall(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 ball = {

                        x:x+(RADIUS+1)+j*2*(RADIUS+1),

                        y:y+(RADIUS+1)+i*2*(RADIUS+1),

                        a:2+Math.random(),

                        vx:Math.pow(-1,Math.random()*10)*4,

                        vy:-5+Math.random(),

                        ballColor:colors[Math.floor(Math.random()*colors.length)]

                    }

                    balls.push(ball);//    将小球放入数组balls中
                }
                
            }
        }
    }


    
    function render(cxt){    
        
         cxt.clearRect(0 , 0 , canvas.width , canvas.height  );
                //        每次调用时,清除canvas画布
                
        var hours = parseInt(cutTimeSeconds / 3600);   
        var minutes = parseInt((cutTimeSeconds - hours*3600) / 60);                               
        var seconds = parseInt(cutTimeSeconds%60);    
        renderDigit(LEFT , TOP , parseInt(hours/10) , cxt);  
        renderDigit(LEFT+15*(RADIUS+1) , TOP , parseInt(hours%10) , cxt); 

        renderDigit(LEFT+30*(RADIUS+1) , TOP , 10 , cxt);   

        renderDigit(LEFT+40*(RADIUS+1) , TOP , parseInt(minutes/10) , cxt); 
        renderDigit(LEFT+55*(RADIUS+1) , TOP , parseInt(minutes%10) , cxt); 

        renderDigit(LEFT+70*(RADIUS+1) , TOP , 10 , cxt);                                
                //        绘制时钟冒号

        renderDigit(LEFT+80*(RADIUS+1) , TOP , parseInt(seconds/10) , cxt);  
        renderDigit(LEFT+95*(RADIUS+1) , TOP , parseInt(seconds%10) , cxt);

        for (var i = 0; i < balls.length; i++) {
            cxt.fillStyle = balls[i].ballColor;
            cxt.beginPath();
            cxt.arc(balls[i].x ,balls[i].y , RADIUS , 0 ,2*Math.PI);
            cxt.closePath();
        };
    };

    /********************************************************************************************renderDigit(x , y , num , cxt)*/
    function renderDigit(x , y , num , cxt){                                            
                //        该函数用于绘制数字

        cxt.fillStyle = 'rgb(0 , 102 , 153)';                                                
                //         设置绘图颜色
        for (var n = 0 ; n<digit[num].length ; n++ )                        
                //        遍历digit[num]数组;n:行
        {
            for (var m = 0 ; m<digit[num][n].length ; m++ )                
                    //        再遍历digit[num][n]数组;m:列
            {
                if (digit[num][n][m] == 1)                               
                {    
                    cxt.beginPath();

                    cxt.arc(x+(RADIUS+1)+m*2*(RADIUS+1) , y+(RADIUS+1)+n*2*(RADIUS+1) , RADIUS , 0 , 2*Math.PI);                                            
                      
                    cxt.closePath();

                    cxt.fill();
                }
            }
        }
    };


提问者:TheRock陈 2015-09-20 16:21

个回答

  • yuyun2015
    2016-01-11 23:47:03

    var endTime = new Date(2015,8,22,0,0,0);

    这句话是定义终点时间的,如果定义的比当前时间小,你通过getCutTimeSeconds()计算出的cutTimeSeconds和nextTimeSeconds都是0,所以nextSeconds != cutSeconds就会始终为 false。