效果图:
这个实例主要注意:
1,剩余时间的计算
2,每个时间数字的绘制
时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 )
num.js文件:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 var digital = 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 <head> 2 <meta charset='utf-8' /> 3 <style> 4 #canvas { 5 border: 1px dashed #aaa; 6 } 7 </style> 8 <script src="./num.js"></script> 9 <script> 10 window.onload = function () { 11 var oCanvas = document.querySelector("#canvas"), 12 oGc = oCanvas.getContext('2d'), 13 width = oCanvas.width, height = oCanvas.height, 14 radius = 10, 15 leftTime = 0, 16 endTime = new Date( 2017, 09, 10, 15, 30, 02 ); 17 18 leftTime = getLeftTime(); 19 showTime( oGc ); 20 setInterval(function(){ 21 oGc.clearRect( 0, 0, width, height ); 22 leftTime = getLeftTime(); 23 showTime( oGc ); 24 }, 1000); 25 26 function showTime( cxt ){ 27 var hour = parseInt( leftTime / 3600 ); 28 var min = parseInt( ( leftTime - hour * 3600 ) / 60 ); 29 var sec = leftTime % 60; 30 31 showNum( 0, 0, parseInt( hour / 10 ), cxt ); 32 showNum( 15 * ( radius + 1 ), 0, parseInt( hour % 10 ), cxt ); 33 showNum( 30 * ( radius + 1 ), 0, 10, cxt ); 34 showNum( 39 * ( radius + 1 ), 0, parseInt( min / 10 ), cxt ); 35 showNum( 54 * ( radius + 1 ), 0, parseInt( min % 10 ), cxt ); 36 showNum( 69 * ( radius + 1 ), 0, 10, cxt ); 37 showNum( 78 * ( radius + 1 ), 0, parseInt( sec / 10 ), cxt ); 38 showNum( 93 * ( radius + 1 ), 0, parseInt( sec % 10 ), cxt ); 39 } 40 41 function getLeftTime(){ 42 var curTime = new Date(); 43 var restTime = endTime.getTime() - curTime.getTime(); 44 restTime = Math.round( restTime / 1000 ); 45 return restTime > 0 ? restTime : 0; 46 } 47 48 //显示时间的每一位 49 function showNum( x, y, num, cxt ){ 50 cxt.fillStyle = '#09f'; 51 for( var i = 0; i < digital[num].length; i++ ){ 52 for( var j = 0; j < digital[num][i].length; j++ ){ 53 if ( digital[num][i][j] == 1 ){ 54 cxt.beginPath(); 55 cxt.arc( x + j * 2 * ( radius + 1 ) + ( radius + 1 ), y + i * 2 * ( radius + 1 ) + ( radius + 1 ), radius, 0, + 360 * Math.PI / 180, false ); 56 cxt.closePath(); 57 cxt.fill(); 58 } 59 } 60 } 61 } 62 } 63 </script> 64 </head> 65 <body> 66 <canvas id="canvas" width="1200" height="300"></canvas> 67 </body>
<head> <meta charset='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script> var digital = [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,0,1,1,0], [0,0,1,1,1,0,0] ],//0 [ [0,0,0,1,1,0,0], [0,1,1,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [1,1,1,1,1,1,1] ],//1 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,0,0,1,1], [1,1,1,1,1,1,1] ],//2 [ [1,1,1,1,1,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//3 [ [0,0,0,0,1,1,0], [0,0,0,1,1,1,0], [0,0,1,1,1,1,0], [0,1,1,0,1,1,0], [1,1,0,0,1,1,0], [1,1,1,1,1,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,1,1] ],//4 [ [1,1,1,1,1,1,1], [1,1,0,0,0,0,0], [1,1,0,0,0,0,0], [1,1,1,1,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//5 [ [0,0,0,0,1,1,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//6 [ [1,1,1,1,1,1,1], [1,1,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0] ],//7 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//8 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,1,1,0,0,0,0] ],//9 [ [0,0,0,0], [0,0,0,0], [0,1,1,0], [0,1,1,0], [0,0,0,0], [0,0,0,0], [0,1,1,0], [0,1,1,0], [0,0,0,0], [0,0,0,0] ]//: ]; </script> <script> window.onload = function () { var oCanvas = document.querySelector("#canvas"), oGc = oCanvas.getContext('2d'), width = oCanvas.width, height = oCanvas.height, radius = 10, leftTime = 0, endTime = new Date( 2017, 09, 10, 15, 30, 02 ); leftTime = getLeftTime(); showTime( oGc ); setInterval(function(){ oGc.clearRect( 0, 0, width, height ); leftTime = getLeftTime(); showTime( oGc ); }, 1000); function showTime( cxt ){ var hour = parseInt( leftTime / 3600 ); var min = parseInt( ( leftTime - hour * 3600 ) / 60 ); var sec = leftTime % 60; showNum( 0, 0, parseInt( hour / 10 ), cxt ); showNum( 15 * ( radius + 1 ), 0, parseInt( hour % 10 ), cxt ); showNum( 30 * ( radius + 1 ), 0, 10, cxt ); showNum( 39 * ( radius + 1 ), 0, parseInt( min / 10 ), cxt ); showNum( 54 * ( radius + 1 ), 0, parseInt( min % 10 ), cxt ); showNum( 69 * ( radius + 1 ), 0, 10, cxt ); showNum( 78 * ( radius + 1 ), 0, parseInt( sec / 10 ), cxt ); showNum( 93 * ( radius + 1 ), 0, parseInt( sec % 10 ), cxt ); } function getLeftTime(){ var curTime = new Date(); var restTime = endTime.getTime() - curTime.getTime(); restTime = Math.round( restTime / 1000 ); return restTime > 0 ? restTime : 0; } //显示时间的每一位 function showNum( x, y, num, cxt ){ cxt.fillStyle = '#09f'; for( var i = 0; i < digital[num].length; i++ ){ for( var j = 0; j < digital[num][i].length; j++ ){ if ( digital[num][i][j] == 1 ){ cxt.beginPath(); cxt.arc( x + j * 2 * ( radius + 1 ) + ( radius + 1 ), y + i * 2 * ( radius + 1 ) + ( radius + 1 ), radius, 0, + 360 * Math.PI / 180, false ); cxt.closePath(); cxt.fill(); } } } } } </script> </head> <body> <canvas id="canvas" width="1200" height="300"></canvas> </body>
run code
run code
这里要注意一下,如果当前时间超过2017年10月10日15:30:02分就没有效果了,你需要把这个剩余时间设置比你当前的时间大几天就可以了