改动代码，出现问题

我觉得时钟的话既然可以getHours得到小时、分钟、秒，没必要化成毫秒再转换回去，所以改了下代码，去掉了getCurrentShowTimeSeconds( )这个函数，代码如下，小球的自由落体运动正确，但是产生落体小球的位置和频次不对，时钟走秒也不太对劲，谁帮我看下是哪里的问题？

/**
 * Created by Administrator on 2016/10/8 0008.
 */
//定义两个全局变量，就可以在onload函数中使用，这样做的好处是屏布的大小改变起来非常方便；其次后续做屏幕自适应时只需要计算这两个值就可以了
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;  //每个数字上边距
var MARGIN_LEFT = 30;  //第一个数字的左边距
//const 声明创建一个只读的常量。这不意味着常量指向的值不可变，而是变量标识符的值只能赋值一次。
var curShowTime = 0;     //当前时间
var balls = [];     //一旦有新的小球，添加到这里
var colors = ["#33E5B5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","CC0000"];     //生成小球的颜色
window.onload=function(){
    WINDOW_WIDTH = document.body.clientWidth;;
    WINDOW_HEIGHT = document.body.clientHeight;;
    MARGIN_LEFT = Math.round(WINDOW_WIDTH/10);
    RADIUS = Math.round(WINDOW_WIDTH*4/5/108-1);
    MARGIN_TOP =Math.round(WINDOW_HEIGHT/5);
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
    curShowTime = new Date();
    setInterval(
        function(){
            render(context);
            update();
        },50
    )
}
/**
 * 绘制下一个时间
 */
function update(){
    var nextShowTime = new Date();
    var nextHours = nextShowTime.getHours();
    var nextMinutes = nextShowTime.getMinutes();
    var nextSeconds = nextShowTime.getMinutes();
    var curHours = curShowTime.getHours();
    var curMinutes = curShowTime.getMinutes();
    var curSeconds = curShowTime.getSeconds();
    //一旦时间改变
    if(nextSeconds != curSeconds){
        if(parseInt(nextHours/10) != parseInt(curHours/10)){        //小时的十位数有变化
            addBalls( MARGIN_LEFT , MARGIN_TOP , parseInt(nextHours/10) );     //产生小球，数字位置 及 本身
        }
        if(parseInt(nextHours%10) != parseInt(curHours%10)){
            addBalls( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(nextHours/10) );
        }
        if(parseInt(nextMinutes/10) != parseInt(curMinutes/10)){
            addBalls( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(nextMinutes/10) );
        }
        if(parseInt(nextMinutes%10) != parseInt(curMinutes%10)){
                addBalls( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(nextMinutes/10) );
        }
        if(parseInt(nextSeconds/10) != parseInt(curSeconds/10)){
            addBalls( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(nextSeconds/10) );
        }
        if(parseInt(nextSeconds%10) != parseInt(curSeconds%10)){
            addBalls( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(nextSeconds/10) );
        }
        //更新时间
        curShowTime = nextShowTime;
    }
    //对所有已经产生的小球的运动变化进行更新
    updateBalls();
    console.log(balls.length);
}
/**
 * 更新小球的运动状态
 * 遍历balls数组里的小球，实现抛物线运动.
 * 以及性能优化将运动到画布外的小球删除掉，只留下画布内的小球，节省内存
 */
function updateBalls(){
    var count = 0;      //记录保留在画布中小球的数量
    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.6;
        }
        if( balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH ){      //这个序号为i的小球仍然在画布中
            balls[count++] = balls[i];
        }
    }
    while(balls.length > Math.min(count,300)){
        balls.pop();
    }
}
/**
 * 产生将要自由落体的小球。和render()相似，在(x,y)的位置对num数字的点阵化的位置加上一个小球
 * @param x
 * @param y
 * @param num
 */
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(),      //1.5 加上0-1之间的随机数，g不同，使每个小球略有不同
                    vx:Math.pow( -1 , Math.ceil(Math.random()*1000) ) * 4,
                    vy:-5,
                    color:colors[Math.floor( Math.random()*colors.length )]
                }
                //push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
                balls.push(aBall);
            }
        }
    }
}
/**
 * 绘制当前时间。render是在(x,y)的位置对num数字的点阵话化进行渲染，
 * @param cxt
 */
function render(cxt){
    //进行逐帧动画，每一帧都要把改变的对象进行刷新
    cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);      //clearRect() 方法清空给定矩形内的指定像素。
    
    var hours = curShowTime.getHours();
    var minutes = curShowTime.getMinutes();
    var seconds = curShowTime.getSeconds();
    //一个数字一个数字绘制,先绘制数字1
    renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt);
    //数字是7*10的点阵
    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 );
        cxt.closePath();
        cxt.fill();
    }
}
/**
 *
 * @param x 位置坐标
 * @param y 位置坐标
 * @param num 数字
 * @param cxt
 */
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();
                //第（i，j）个小圆的圆心的位置：
                //CenterX: x + j*2(R+1) +(R+1)
                //CenterY: y + i*2(R+1) +(R+1)
                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();
            }
        }
    }
}