效果图:
这个实例主要注意:
1,剩余时间的计算
2,每个时间数字的绘制
时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 )
num.js文件:
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>
这里要注意一下,如果当前时间超过2017年10月10日15:30:02分就没有效果了,你需要把这个剩余时间设置比你当前的时间大几天就可以了