木头人
2016-11-22 22:50:16
原生js实现的粒子时钟效果
原生js实现的效果;
javascript的代码:
(function (D) { var _ = { extend: function (t, s, o) { if (o === undefined) o = true; for (var p in s) { if (!(p in t) || o) { t[p] = s[p] } } return t; }, addEvent: function (o, e, f) { o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on' + e, function () {f.call(o)}) }, $ : function (id) { return typeof id === 'string' ? D.getElementById(id) : id; }, log : function (s) { !!window.console && console.log(s) } }; var NUM = [ '#### ########## ##################### ', '# # # # ## ## # ## ## # ', '# # # # ## ## # ## ## # # ', '# # ##################### ######### ', '# # ## # # ## # ## # # # ', '# # ## # # ## # ## # # ', '#### ######### ######### ######### ' ] //Math.floor:返回小于等于数字参数的最大整数 var TM, tm, MF = Math.floor, ow = 10, od = 8, NT = [], _NT = [], scr, W, H, iPos = {}, e = 0, O = [], AO = {}, grid, gw, gh; function getTime () { // reset AO AO = {}; tm = TM; var T = new Date(), h = T.getHours(), m = T.getMinutes(), s = T.getSeconds(); //时钟显示的数字 TM = [ MF(h/10), h%10, MF(m/10), m%10, MF(s/10), s%10 ]; //_.log(tm+'\n'+TM) //每隔一秒刷新一次 setTimeout(arguments.callee, 1000); } function toNT(TM, NT) { for (var i = 0; i < 7; i ++) { var temp = []; for (var j = 0; j < TM.length; j ++) { temp.push(NUM[i].substr(TM[j]*4, 4)); if (j == 1 || j == 3) { temp.push(NUM[i].substr(40, 4)) } } NT[i] = temp.join(''); } } function CNum () { toNT(TM, NT); if (tm && tm.length) {toNT(tm, _NT)} DrawNum(); //每隔0.02秒刷新 setTimeout(arguments.callee, 20) } function DrawNum () { //_.log(NT.length+'\n'+_NT.length) var ind = 0; for (var i = 0; i < NT.length; i ++) { for (var j = 0; j < NT[i].length; j ++) { var _char = '@', nchar = NT[i].charAt(j); var c = nchar === '#' ? 'blue' : 'gray'; if (nchar === '#') { if (MF(j/4) < 3) c = 'red'; else if (MF(j/4) < 6) c = 'blue'; else if (MF(j/4) < 8) c = 'green'; } else { c = 'gray'; } if (O.length >= 4*8*7) { O[ind].o.className = c; O[ind].o.style.left = j*(ow + od) + MF(j/4)*20 + iPos.x + 'px'; O[ind].o.style.top = i*(ow + od) + iPos.y + 'px'; } else { O.push(new Dot(c, { l: j*(ow + od) + MF(j/4)*20 + iPos.x, t: i*(ow + od) + iPos.y })); } // dot anim if (_NT.length === 7) { _char = _NT[i].charAt(j); if (_char === '#' && nchar === ' ') { var k = 'k'+i+'_'+j, _c; if (MF(j/4) < 3) _c = 'red'; else if (MF(j/4) < 6) _c = 'blue'; else if (MF(j/4) < 8) _c = 'green'; if (!AO[k]) { AO[k] = new Dot(_c, { l: j*(ow + od) + MF(j/4)*20 + iPos.x, t: i*(ow + od) + iPos.y }) //_.log(k) AO[k].anim() } } } ind ++; } } } //创建小圆点 // DOT constructor function Dot (color, pos) { var g = Math.random(); this.o = D.createElement('span'); this.vx = this.vy = this.dx = this.dy = 0; this.vy = -this.randNum(1, 5); this.dir = Math.random() > .5 ? this.randNum(1, 5) : -1*this.randNum(1, 5); this.g = g < .1 ? .1 : g; this.x = pos.l; this.y = pos.t; scr.appendChild(this.o); this.setStyle(color, pos); } _.extend(Dot.prototype, { setStyle: function (c, pos) { var sty = this.o.style; this.o.className = c; sty['width'] = ow + 'px'; sty['height'] = ow + 'px'; sty['position'] = 'absolute'; sty['left'] = pos.l + 'px'; sty['top'] = pos.t + 'px'; }, randNum: function (f, t) { return Math.round(Math.random()*(t-f)) + f; }, //小球移动函数 move: function () { this.x += this.dx; this.y += this.dy; this.vx += this.dx; this.vy += this.dy; //通过样式进行移动 this.o.style['left'] = this.x + 'px'; this.o.style['top'] = this.y + 'px'; }, //边界检测函数 boundary: function () { //gravity this.vy += this.g; this.x += this.dir; this.y += this.vy; if (this.x < 0 || this.x > W) { //出界以后停止小球的计时器 clearInterval(this.st); scr.removeChild(this.o); } if (this.y > H-10 && this.vy > 0) { this.vy *= -1; } }, anim: function () { var _this = this; this.st = setInterval(function () { _this.move(); _this.boundary(); }, 16) } }) function resize () { W = scr.offsetWidth; H = scr.offsetHeight; iPos.x = (W-32*(ow+od)-20*8)/2; iPos.y = (H-7*(ow+od))/2; } // init _.addEvent(window, 'load', function () { scr = _.$('screen'); resize(); getTime(); CNum(); gw = Math.round(W/10); gh = Math.round(H/10); grid = new Array(gw * gh); }) _.addEvent(window, 'resize', resize) })(document)
css代码:
@charset "utf-8"; html,body{margin:0;padding:0;position:absolute;width:100%;height:100%;overflow:hidden} #screen{width:80%;height:50%;background:#ddd;position:absolute;left:10%;top:10%;overflow:hidden} span.blue, span.green, span.gray, span.red{ position:absolute; font-size:0; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px; } .blue{background:#06c} .green{background:#4eb84a} .gray{background:#f3f3f3} .red{background:#da4901}
猜你喜欢
请下载代码后再发表评论
文件名:粒子时钟.zip,文件大小:3.626K
下载
- /
- /粒子时钟
- /粒子时钟/css
- /粒子时钟/css/timeball.css
- /粒子时钟/demo.html
- /粒子时钟/js
- /粒子时钟/js/timeball.js
- /粒子时钟/css
- /粒子时钟

- 使用java和javascript判断当前浏览者的操作系统
- 证 javascript简单调色板工具
- js进度条(原创可用于学习)
- {Tonfay}[js动态报表][兼容IE6+/火狐/360/谷歌/等各大浏览器][可手动设置间隔时间读取数据/并且显示在图表上]
- 证 5个小javascript特效实例
- 证精 史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码
- 正则表达式的JS验证
- 证 js canvas无限生成国风水墨画
- js打印,预览的功能.希望采纳.
- 证 JavaScript写的贷款计算器源代码下载
- 证 纯js开发的时钟,带秒钟
- 证 js万年历查询设置工作日前端源代码分享

我要打五个! LV2
2021年12月20日
moomin709 LV24
2021年4月21日
fyukhgb LV3
2021年1月6日
周泽清 LV1
2019年12月24日
rfangq LV7
2019年12月9日
hahahhahaxczxczczc LV1
2019年9月9日
魔剑徐 LV2
2019年8月14日
lw19900921 LV25
2019年5月19日
浅忆6969 LV2
2019年4月25日
小王子66 LV12
2019年1月9日

lqzixi LV4
2024年10月10日
bokequ LV3
2024年7月11日
liu2022 LV14
2024年5月12日
szf123 LV12
2023年5月30日
微信网友_6482099074093056
2023年5月19日
暂无贡献等级
秋月常 LV1
2023年4月11日
生米的 LV10
2023年3月3日
wangliyang LV5
2023年3月2日
lyn520 LV3
2023年2月1日
caixint LV2
2022年12月23日