5-4 计时器效果
本节编程练习不计算学习进度，请电脑登录imooc.com操作

计时器效果

计时器

任务

index.htmldigit.jscountdown.js 
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body style="height:100%">
  8.     <canvas id="canvas" style="height:100%">
  9.         当前浏览器不支持Canvas，请更换浏览器后再试
  10.     </canvas>
  11.  
  12.     <script src="digit.js"></script>
  13.     <script src="countdown.js"></script>
  14. </body>
  15. </html>
  1. digit =
  2.     [
  3.         [
  4.             [0,0,1,1,1,0,0],
  5.             [0,1,1,0,1,1,0],
  6.             [1,1,0,0,0,1,1],
  7.             [1,1,0,0,0,1,1],
  8.             [1,1,0,0,0,1,1],
  9.             [1,1,0,0,0,1,1],
  10.             [1,1,0,0,0,1,1],
  11.             [1,1,0,0,0,1,1],
  12.             [0,1,1,0,1,1,0],
  13.             [0,0,1,1,1,0,0]
  14.         ],//0
  15.         [
  16.             [0,0,0,1,1,0,0],
  17.             [0,1,1,1,1,0,0],
  18.             [0,0,0,1,1,0,0],
  19.             [0,0,0,1,1,0,0],
  20.             [0,0,0,1,1,0,0],
  21.             [0,0,0,1,1,0,0],
  22.             [0,0,0,1,1,0,0],
  23.             [0,0,0,1,1,0,0],
  24.             [0,0,0,1,1,0,0],
  25.             [1,1,1,1,1,1,1]
  26.         ],//1
  27.         [
  28.             [0,1,1,1,1,1,0],
  29.             [1,1,0,0,0,1,1],
  30.             [0,0,0,0,0,1,1],
  31.             [0,0,0,0,1,1,0],
  32.             [0,0,0,1,1,0,0],
  33.             [0,0,1,1,0,0,0],
  34.             [0,1,1,0,0,0,0],
  35.             [1,1,0,0,0,0,0],
  36.             [1,1,0,0,0,1,1],
  37.             [1,1,1,1,1,1,1]
  38.         ],//2
  39.         [
  40.             [1,1,1,1,1,1,1],
  41.             [0,0,0,0,0,1,1],
  42.             [0,0,0,0,1,1,0],
  43.             [0,0,0,1,1,0,0],
  44.             [0,0,1,1,1,0,0],
  45.             [0,0,0,0,1,1,0],
  46.             [0,0,0,0,0,1,1],
  47.             [0,0,0,0,0,1,1],
  48.             [1,1,0,0,0,1,1],
  49.             [0,1,1,1,1,1,0]
  50.         ],//3
  51.         [
  52.             [0,0,0,0,1,1,0],
  53.             [0,0,0,1,1,1,0],
  54.             [0,0,1,1,1,1,0],
  55.             [0,1,1,0,1,1,0],
  56.             [1,1,0,0,1,1,0],
  57.             [1,1,1,1,1,1,1],
  58.             [0,0,0,0,1,1,0],
  59.             [0,0,0,0,1,1,0],
  60.             [0,0,0,0,1,1,0],
  61.             [0,0,0,1,1,1,1]
  62.         ],//4
  63.         [
  64.             [1,1,1,1,1,1,1],
  65.             [1,1,0,0,0,0,0],
  66.             [1,1,0,0,0,0,0],
  67.             [1,1,1,1,1,1,0],
  68.             [0,0,0,0,0,1,1],
  69.             [0,0,0,0,0,1,1],
  70.             [0,0,0,0,0,1,1],
  71.             [0,0,0,0,0,1,1],
  72.             [1,1,0,0,0,1,1],
  73.             [0,1,1,1,1,1,0]
  74.         ],//5
  75.         [
  76.             [0,0,0,0,1,1,0],
  77.             [0,0,1,1,0,0,0],
  78.             [0,1,1,0,0,0,0],
  79.             [1,1,0,0,0,0,0],
  80.             [1,1,0,1,1,1,0],
  81.             [1,1,0,0,0,1,1],
  82.             [1,1,0,0,0,1,1],
  83.             [1,1,0,0,0,1,1],
  84.             [1,1,0,0,0,1,1],
  85.             [0,1,1,1,1,1,0]
  86.         ],//6
  87.         [
  88.             [1,1,1,1,1,1,1],
  89.             [1,1,0,0,0,1,1],
  90.             [0,0,0,0,1,1,0],
  91.             [0,0,0,0,1,1,0],
  92.             [0,0,0,1,1,0,0],
  93.             [0,0,0,1,1,0,0],
  94.             [0,0,1,1,0,0,0],
  95.             [0,0,1,1,0,0,0],
  96.             [0,0,1,1,0,0,0],
  97.             [0,0,1,1,0,0,0]
  98.         ],//7
  99.         [
  100.             [0,1,1,1,1,1,0],
  101.             [1,1,0,0,0,1,1],
  102.             [1,1,0,0,0,1,1],
  103.             [1,1,0,0,0,1,1],
  104.             [0,1,1,1,1,1,0],
  105.             [1,1,0,0,0,1,1],
  106.             [1,1,0,0,0,1,1],
  107.             [1,1,0,0,0,1,1],
  108.             [1,1,0,0,0,1,1],
  109.             [0,1,1,1,1,1,0]
  110.         ],//8
  111.         [
  112.             [0,1,1,1,1,1,0],
  113.             [1,1,0,0,0,1,1],
  114.             [1,1,0,0,0,1,1],
  115.             [1,1,0,0,0,1,1],
  116.             [0,1,1,1,0,1,1],
  117.             [0,0,0,0,0,1,1],
  118.             [0,0,0,0,0,1,1],
  119.             [0,0,0,0,1,1,0],
  120.             [0,0,0,1,1,0,0],
  121.             [0,1,1,0,0,0,0]
  122.         ],//9
  123.         [
  124.             [0,0,0,0],
  125.             [0,0,0,0],
  126.             [0,1,1,0],
  127.             [0,1,1,0],
  128.             [0,0,0,0],
  129.             [0,0,0,0],
  130.             [0,1,1,0],
  131.             [0,1,1,0],
  132.             [0,0,0,0],
  133.             [0,0,0,0]
  134.         ]//:
  135.     ];
  1. var WINDOW_WIDTH = 1024;
  2. var WINDOW_HEIGHT = 768;
  3. var RADIUS = 8;
  4. var MARGIN_TOP = 60;
  5. var MARGIN_LEFT = 30;
  6.  
  7. //var endTime = new Date();
  8. //endTime.setTime( endTime.getTime() + 3600*1000 )
  9. var curShowTimeSeconds = 0
  10.  
  11. var balls = [];
  12. const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
  13.  
  14. window.onload = function(){
  15.  
  16.     WINDOW_WIDTH = document.body.clientWidth
  17.     WINDOW_HEIGHT = document.body.clientHeight
  18.  
  19.     MARGIN_LEFT = Math.round(WINDOW_WIDTH /10);
  20.     RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 108)-1
  21.  
  22.     MARGIN_TOP = Math.round(WINDOW_HEIGHT /5);
  23.  
  24.     var canvas = document.getElementById('canvas');
  25.     var context = canvas.getContext("2d");
  26.  
  27.     canvas.width = WINDOW_WIDTH;
  28.     canvas.height = WINDOW_HEIGHT;
  29.  
  30.     curShowTimeSeconds = getCurrentShowTimeSeconds()
  31.     setInterval(
  32.         function(){
  33.             render( context );
  34.             update();
  35.         }
  36.         ,
  37.         50
  38.     );
  39. }
  40.  
  41. function getCurrentShowTimeSeconds() {
  42.     var curTime = new Date();
  43.     var ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();
  44.  
  45.     return ret;
  46. }
  47.  
  48. function update(){
  49.  
  50.     var nextShowTimeSeconds = getCurrentShowTimeSeconds();
  51.  
  52.     var nextHours = parseInt( nextShowTimeSeconds / 3600);
  53.     var nextMinutes = parseInt( (nextShowTimeSeconds - nextHours * 3600)/60 )
  54.     var nextSeconds = nextShowTimeSeconds % 60
  55.  
  56.     var curHours = parseInt( curShowTimeSeconds / 3600);
  57.     var curMinutes = parseInt( (curShowTimeSeconds - curHours * 3600)/60 )
  58.     var curSeconds = curShowTimeSeconds % 60
  59.  
  60.     if( nextSeconds != curSeconds ){
  61.         if( parseInt(curHours/10) != parseInt(nextHours/10) ){
  62.             addBalls( MARGIN_LEFT + 0 , MARGIN_TOP , parseInt(curHours/10) );
  63.         }
  64.         if( parseInt(curHours%10) != parseInt(nextHours%10) ){
  65.             addBalls( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(curHours/10) );
  66.         }
  67.  
  68.         if( parseInt(curMinutes/10) != parseInt(nextMinutes/10) ){
  69.             addBalls( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes/10) );
  70.         }
  71.         if( parseInt(curMinutes%10) != parseInt(nextMinutes%10) ){
  72.             addBalls( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes%10) );
  73.         }
  74.  
  75.         if( parseInt(curSeconds/10) != parseInt(nextSeconds/10) ){
  76.             addBalls( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(curSeconds/10) );
  77.         }
  78.         if( parseInt(curSeconds%10) != parseInt(nextSeconds%10) ){
  79.             addBalls( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(nextSeconds%10) );
  80.         }
  81.  
  82.         curShowTimeSeconds = nextShowTimeSeconds;
  83.     }
  84.  
  85.     updateBalls();
  86.  
  87.     console.log( balls.length)
  88. }
  89.  
  90. function updateBalls(){
  91.  
  92.     for( var i = 0 ; i < balls.length ; i ++ ){
  93.  
  94.         balls[i].x += balls[i].vx;
  95.  
  96.     var c = 1.0;
  97. 	if( balls[i].y + RADIUS + balls[i].vy >= WINDOW_HEIGHT ){
  98. 	    c = ( WINDOW_HEIGHT - (balls[i].y+ RADIUS) ) / balls[i].vy;
  99. 	    console.log( c );	
  100. 	}
  101.  
  102. 	balls[i].y += balls[i].vy;
  103. 	balls[i].vy += c * balls[i].g;;
  104.  
  105.         if( balls[i].y >= WINDOW_HEIGHT-RADIUS ){
  106.             balls[i].y = WINDOW_HEIGHT-RADIUS;
  107. 	    balls[i].vy = - Math.abs(balls[i].vy)*0.75;
  108.         }
  109.     }
  110.  
  111.     var cnt = 0
  112.     for( var i = 0 ; i < balls.length ; i ++ )
  113.         if( balls[i].x + RADIUS > 0 && balls[i].x -RADIUS < WINDOW_WIDTH )
  114.             balls[cnt++] = balls[i]
  115.  
  116.     while( balls.length > cnt ){
  117.         balls.pop();
  118.     }
  119. }
  120.  
  121. function addBalls( x , y , num ){
  122.  
  123.     for( var i = 0  ; i < digit[num].length ; i ++ )
  124.         for( var j = 0  ; j < digit[num][i].length ; j ++ )
  125.             if( digit[num][i][j] == 1 ){
  126.                 var aBall = {
  127.                     x:x+j*2*(RADIUS+1)+(RADIUS+1),
  128.                     y:y+i*2*(RADIUS+1)+(RADIUS+1),
  129.                     g:1.5+Math.random(),
  130.                     vx:Math.pow( -1 , Math.ceil( Math.random()*1000 ) ) * 4,
  131.                     vy:-5,
  132.                     color: colors[ Math.floor( Math.random()*colors.length ) ]
  133.                 }
  134.  
  135.                 balls.push( aBall )
  136.             }
  137. }
  138.  
  139. function render( cxt ){
  140.  
  141.     cxt.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT);
  142.  
  143.     var hours = parseInt( curShowTimeSeconds / 3600);
  144.     var minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 )
  145.     var seconds = curShowTimeSeconds % 60
  146.  
  147.     renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt )
  148.     renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt )
  149.     renderDigit( MARGIN_LEFT + 30*(RADIUS + 1) , MARGIN_TOP , 10 , cxt )
  150.     renderDigit( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(minutes/10) , cxt);
  151.     renderDigit( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(minutes%10) , cxt);
  152.     renderDigit( MARGIN_LEFT + 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt);
  153.     renderDigit( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(seconds/10) , cxt);
  154.     renderDigit( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(seconds%10) , cxt);
  155.  
  156.     for( var i = 0 ; i < balls.length ; i ++ ){
  157.         cxt.fillStyle=balls[i].color;
  158.  
  159.         cxt.beginPath();
  160.         cxt.arc( balls[i].x , balls[i].y , RADIUS , 0 , 2*Math.PI , true );
  161.         cxt.closePath();
  162.  
  163.         cxt.fill();
  164.     }
  165. }
  166.  
  167. function renderDigit( x , y , num , cxt ){
  168.  
  169.     cxt.fillStyle = "rgb(0,102,153)";
  170.  
  171.     for( var i = 0 ; i < digit[num].length ; i ++ )
  172.         for(var j = 0 ; j < digit[num][i].length ; j ++ )
  173.             if( digit[num][i][j] == 1 ){
  174.                 cxt.beginPath();
  175.                 cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1) , y+i*2*(RADIUS+1)+(RADIUS+1) , RADIUS , 0 , 2*Math.PI )
  176.                 cxt.closePath()
  177.  
  178.                 cxt.fill()
  179.             }
  180. }
下一节