改动代码，出现问题
我觉得时钟的话既然可以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();
}
}
}
}
