个回答

• endenvor

  2016-03-01 09:50:09

  你试试我这个，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();

  }

  }

  }

  }

  
  

  0

• iceConfig

  2016-01-13 13:43:16

  var ret = (curTime.getTime() - beginTime.getTime())/1000;

  0

• echo_kinchao

  2016-01-05 12:09:53

  从0开始每秒++

  0