这是一个值得纪念的日子，从此开始，我将在这记录我的点点滴滴。
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 © 2012 - K字带头<br /> 311 <a href="http://www.cnblogs.com/tracerking/">博客</a> & 312 <a href="http://weibo.com/tracerking">新浪微博</a> </span> 313 </div> 314 </body> 315 </html>
1810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
