为了纪念博客园开通博客-参考资料学习用JS实现的Clock

这是一个值得纪念的日子，从此开始，我将在这记录我的点点滴滴。

ps：实习中，就业的压力在蔓延

 效果如下图：

 

 

 

 

View Code 
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 <title>Clock</title>
  6 <style>
  7 html,body {
  8     margin: 0;
  9     padding: 0;
 10     position: absolute;
 11     width: 100%;
 12     height: 100%;
 13     overflow: hidden
 14 }
 15 
 16 #screen {
 17     width: 80%;
 18     height: 50%;
 19     background: #ddd;
 20     position: absolute;
 21     left: 10%;
 22     top: 10%;
 23     overflow: hidden
 24 }
 25 
 26 span.blue,span.green,span.gray,span.red {
 27     position: absolute;
 28     font-size: 0;
 29     -webkit-border-radius: 5px;
 30     -moz-border-radius: 5px;
 31     -o-border-radius: 5px;
 32     border-radius: 5px;
 33 }
 34 
 35 .blue {
 36     background: #06c
 37 }
 38 
 39 .green {
 40     background: #4eb84a
 41 }
 42 
 43 .gray {
 44     background: #f3f3f3
 45 }
 46 
 47 .red {
 48     background: #da4901
 49 }
 50 
 51 #floor {
 52     color: #06c;
 53     text-shadow: #06c 0 0 20px, #06c 0 0 20px;
 54     font-size: 18px;
 55     font-family: Consolas;
 56     cursor: default;
 57     position: absolute;
 58     top: 85%;
 59     right:2%;
 60     text-align: center;
 61 }
 62 
 63 #floor a {
 64     color: #06c;
 65     text-decoration: none;
 66 }
 67 </style>
 68 
 69 <script type="text/javascript">
 70 (function (D) {
 71 
 72     var _ = {
 73         extend: function (t, s, o) {
 74             if (o === undefined) o = true;
 75             for (var p in s) {
 76                 if (!(p in t) || o) {
 77                     t[p] = s[p]
 78                 }
 79             }
 80             return t;
 81         },
 82 
 83         addEvent: function (o, e, f) {
 84             o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on' + e, function () {f.call(o)})
 85         },
 86 
 87         $ : function (id) {
 88             return typeof id === 'string' ? D.getElementById(id) : id;
 89         },
 90 
 91         log : function (s) {
 92             !!window.console && console.log(s)
 93         }
 94     };
 95 
 96     var NUM = [
 97 
 98         '####   ##########  #####################    ',
 99 
100         '#  #   #   #   ##  ##   #      ##  ##  #    ',
101 
102         '#  #   #   #   ##  ##   #      ##  ##  #  # ',
103 
104         '#  #   #####################   #########    ',
105 
106         '#  #   ##      #   #   ##  #   ##  #   #  # ',
107 
108         '#  #   ##      #   #   ##  #   ##  #   #    ',
109 
110         '####   #########   #########   #########    '
111 
112     ]
113 
114     var TM, tm, MF = Math.floor, ow = 10, od = 8, NT = [], _NT = [], scr, W, H, iPos = {}, e = 0, O = [], AO = {}, grid, gw, gh;
115 
116     function getTime () {
117         AO = {};
118         tm = TM;
119         var T = new Date(),
120             h = T.getHours(),
121             m = T.getMinutes(),
122             s = T.getSeconds();
123         TM = [
124             MF(h/10),
125             h%10,
126             MF(m/10),
127             m%10,
128             MF(s/10),
129             s%10
130         ];
131         setTimeout(arguments.callee, 1000);
132     }
133 
134     function toNT(TM, NT) {
135         for (var i = 0; i < 7; i ++) {
136             var temp = [];
137             for (var j = 0; j < TM.length; j ++) {
138                 temp.push(NUM[i].substr(TM[j]*4, 4));
139                 if (j == 1 || j == 3) {
140                     temp.push(NUM[i].substr(40, 4))
141                 }
142             }
143             NT[i] = temp.join('');
144         }
145     }
146 
147     function CNum () {
148         toNT(TM, NT);
149         if (tm && tm.length) {toNT(tm, _NT)}
150         DrawNum();
151         setTimeout(arguments.callee, 20)
152     }
153 
154     function DrawNum () {
155         var ind = 0;
156         for (var i = 0; i < NT.length; i ++) {
157             for (var j = 0; j < NT[i].length; j ++) {
158                 var _char = '@', nchar = NT[i].charAt(j);
159                 var c = nchar === '#' ? 'blue' : 'gray';
160                 if (nchar === '#') {
161                     if (MF(j/4) < 3) c = 'red';
162                     else if (MF(j/4) < 6) c = 'blue';
163                     else if (MF(j/4) < 8) c = 'green';
164                 } else {
165                     c = 'gray';
166                 }
167                 if (O.length >= 4*8*7) {
168                     O[ind].o.className = c;
169                     O[ind].o.style.left = j*(ow + od) + MF(j/4)*20 + iPos.x + 'px';
170                     O[ind].o.style.top = i*(ow + od) + iPos.y + 'px';
171                 } else {
172                     O.push(new Dot(c, {
173                         l: j*(ow + od) + MF(j/4)*20 + iPos.x,
174                         t: i*(ow + od) + iPos.y
175                     }));
176                 }
177                 if (_NT.length === 7) {
178                     _char = _NT[i].charAt(j);
179                     if (_char === '#' && nchar === ' ') {
180                         var k = 'k'+i+'_'+j, _c;
181                         if (MF(j/4) < 3) _c = 'red';
182                         else if (MF(j/4) < 6) _c = 'blue';
183                         else if (MF(j/4) < 8) _c = 'green';
184                         if (!AO[k]) {
185                             AO[k] = new Dot(_c, {
186                                 l: j*(ow + od) + MF(j/4)*20 + iPos.x,
187                                 t: i*(ow + od) + iPos.y
188                             })
189                             AO[k].anim()
190                         }
191                     }
192                 }
193                 ind ++;
194             }
195         }
196     }
197 
198     function Dot (color, pos) {
199         var g = Math.random();
200         this.o = D.createElement('span');
201         this.vx = this.vy = this.dx = this.dy = 0;
202         this.vy = -this.randNum(1, 5);
203         this.dir = Math.random() > .5 ? this.randNum(1, 5) : -1*this.randNum(1, 5);
204         this.g = g < .1 ? .1 : g;
205         this.x = pos.l;
206         this.y = pos.t;
207         scr.appendChild(this.o);
208         this.setStyle(color, pos);
209     }
210 
211     _.extend(Dot.prototype, {
212 
213         setStyle: function (c, pos) {
214             var sty = this.o.style;
215             this.o.className = c;
216             sty['width'] = ow + 'px';
217             sty['height'] = ow + 'px';
218             sty['position'] = 'absolute';
219             sty['left'] = pos.l + 'px';
220             sty['top'] = pos.t + 'px';
221         },
222 
223         randNum: function (f, t) {
224             return Math.round(Math.random()*(t-f)) + f;
225         },
226 
227         move: function () {
228             this.x += this.dx;
229             this.y += this.dy;
230             this.vx += this.dx;
231             this.vy += this.dy;
232             this.o.style['left'] = this.x + 'px';
233             this.o.style['top'] = this.y + 'px';
234         },
235 
236         boundary: function () {
237             this.vy += this.g;
238             this.x += this.dir;
239             this.y += this.vy;
240             if (this.x < 0  || this.x > W) {
241                 clearInterval(this.st);
242                 scr.removeChild(this.o);
243             }
244             if (this.y > H-10 && this.vy > 0) {
245                 this.vy *= -1;
246             }
247         },
248 
249         dotCollision: function () {
250             var gx = Math.round(this.x/10), 
251                 gy = Math.round(this.y/10);
252                 for (var ix = gx - 1; ix <= gx + 1; ix++) { 
253                     for (var iy = gy - 1; iy <= gy + 1; iy++) {
254                         var g = grid[iy * gw + ix] || [];
255                         for (j = 0, l = g.length; j < l; j++) {
256                             var that = g[j];
257                             var dx = that.x - this.x;
258                             var dy = that.y - this.y;
259                             var d = Math.sqrt(dx * dx + dy * dy);
260                             if (d < 10 && d > 0) {
261                                 dx = (dx / d) * (10 - d) * .0025;
262                                 dy = (dy / d) * (10 - d) * .0025;
263                                 this.dx -= dx;
264                                 this.dy -= dy;
265                                 that.dx += dx;
266                                 that.dy += dy;
267                             }
268                         }
269                     }
270                 }
271             if (!grid[gy * gw + gx]) grid[gy * gw + gx] = [this];
272             else grid[gy * gw + gx].push(this);
273         },
274 
275         anim: function () {
276 
277             var _this = this;
278 
279             this.st = setInterval(function () {
280                 _this.move();
281                 _this.boundary();
282             }, 16)
283         }
284     })
285 
286     function resize () {
287         W = scr.offsetWidth;
288         H = scr.offsetHeight;
289         iPos.x = (W-32*(ow+od)-20*8)/2;
290         iPos.y = (H-7*(ow+od))/2;
291     }
292 
293     _.addEvent(window, 'load', function () {
294         scr = _.$('screen');
295         resize();
296         getTime();
297         CNum();
298         gw = Math.round(W/10); 
299         gh = Math.round(H/10);
300         grid = new Array(gw * gh);
301     })
302 
303     _.addEvent(window, 'resize', resize)
304 
305 })(document)
306 </script>
307 </head>
308 <body>
309     <div id="screen">
310     <span id="floor">Copyright&nbsp;&copy;&nbsp;2012 - K字带头<br />
311         <a href="http://www.cnblogs.com/tracerking/">博客</a>&nbsp;&nbsp;&amp;&nbsp;
312         <a href="http://weibo.com/tracerking">新浪微博</a> </span>
313     </div>
314 </body>
315 </html>

 

 

 

posted @ 2012-12-27 13:37  K字带头  阅读(130)  评论(2)  编辑  收藏  举报