计时器canvas

Question

下面是js代码，html 和digit.js代码和老师给的一样，

var WINDOW_WIDTH = 1388;

var WINDOW_HEIGHT = 768;

var RADIUS = 8;

var MARGIN_TOP = 270;

var MARGIN_LEFT = 10;

var MARGIN_TOP_YEAR = 50;

// var curShowTimeSeconds = 0;

var balls = [];

const colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#BB8800", "#FF4444", "#CC0000"];

window.onload = function(){

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

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

canvas.width = WINDOW_WIDTH;

canvas.height = WINDOW_HEIGHT;

setInterval(

function(){

render(context);

curShowTimeSeconds = getCurShowtimeSeconds();

update();

},50

)

}

function update(){

var nextShowTimeSeconds = getCurShowtimeSeconds();

var nextHours = nextShowTimeSeconds.getHours();

var nextMinutes = extShowTimeSeconds.getMinutes();

var nextSeconds = extShowTimeSeconds.getSeconds();

var curHours = curShowTimeSeconds.getHours();

var curMinutes = curShowTimeSeconds.getMinutes();

var curSeconds = getCurShowtimeSeconds.getSeconds();

if(nextSeconds != curSeconds){

//hours

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

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

}

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

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

}

//minutes

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

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

}

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

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

}

//seconds

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

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

}

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

addBalls(MARGIN_LEFT + 94*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds%10));

}

getCurShowtimeSeconds = nextShowTimeSeconds;

}

updateBalls();

}

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~2.5

vx: Math.pow(-1, Math.ceil(Math.random()*1000)) * 4,  //Math.pow()--是正1或-1， pow(a,b) --- a的b次方

vy: -5,

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

   }

   balls.push(aBall);

}

}

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

var d = new Date();

return d;

}

function render(cxt){

cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);

var month = curShowTimeSeconds.getMonth() + 1;

var date = curShowTimeSeconds.getDate();

var hours = curShowTimeSeconds.getHours();

var minutes = curShowTimeSeconds.getMinutes();

var seconds = curShowTimeSeconds.getSeconds();

//year

renderDigit(MARGIN_LEFT, MARGIN_TOP_YEAR, 2, cxt);

renderDigit(MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP_YEAR, 0, cxt);

renderDigit(MARGIN_LEFT + 30*(RADIUS+1), MARGIN_TOP_YEAR, 1, cxt);

renderDigit(MARGIN_LEFT + 45*(RADIUS+1), MARGIN_TOP_YEAR, 6, cxt);

//month

renderDigit(MARGIN_LEFT + 67*(RADIUS+1), MARGIN_TOP_YEAR, parseInt(month/10), cxt);

renderDigit(MARGIN_LEFT + 83*(RADIUS+1), MARGIN_TOP_YEAR, parseInt(month%10), cxt);

//date

renderDigit(MARGIN_LEFT + 105*(RADIUS+1), MARGIN_TOP_YEAR, parseInt(date/10), cxt);

renderDigit(MARGIN_LEFT + 120*(RADIUS+1), MARGIN_TOP_YEAR, parseInt(date%10), cxt);

//hours minutes seconds

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)

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

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

}

}

}

}

Answer 1

这节我学习的时候 一开始也发现不对劲了，不过你仔细看一下  程序逻辑就知道了，需要修改代码中的日期时间的值

Answer 2

所以你的问题是？