javascript 閃爍的圣誕樹實現(xiàn)代碼

2019-11-21 00:52:24

字體：大中小

供稿：網(wǎng)友

<html> <head> <title>christree</title> </head> <body style="background:#111"> <script type='text/javascript'> var $ = function(){ var dom = {}; return { get : function($){ if(!dom[$]) dom[$] = document.getElementById($); return dom[$]; } ,apply : function(s,t,d){ if(t && typeof t == 'object') $.apply(s,d) if(s && t && typeof s == 'object' && typeof t == 'object'){ for(var i in t){s[i] = t[i]} } return s; } ,createEl : function(attribute,tag){ if(!tag) tag = "DIV"; var el = document.createElement(tag); $.apply(el,attribute); return el; } } }() var chrisTree = function(params){ $.apply(this.param,params || {}) this.__construct(); } chrisTree.prototype = { param : {} ,__construct : function(){ var x = this.param.x,y = this.param.y,xy=[]; for(var i=0;i<7;i++){ xy = this.createTree(x,y,i/4) x = xy[0]; y = xy[1]; } this.createRoot(x,y,xy[2]); } ,createTree : function(x,y,level){ var lel = level || 0.1 for(i=0;i<110*lel;i+=10){ for(j=i-10;j<2*i;j+=10){ var el = $.createEl({ id : "div_"+x+"_"+i+"_"+y+"_"+j },"span"); el.style.cssText = "width:5px;height:5px;position:absolute;left:"+(x - i*3/2 + j)+";top:"+(y+i)+";font-size:0px;background:#00ff00"; document.body.appendChild(el); if(j == i-10) this.lightUp(el.id,x - i*3/2 + j,y+i); } this.lightUp(el.id,x - i*3/2 + j,y+i); } return [this.param.x,this.param.y+110*lel,y+i] } ,createRoot : function(x,y,l){ for(var i = 0;i<50;i++){ var el = $.createEl({ id : "div_"+x+"_"+i+"_"+y+"_"+j },"span"); el.style.cssText = "width:5px;height:5px;position:absolute;left:"+x+";top:"+(l+i)+";font-size:0px;background:#fff"; document.body.appendChild(el); } } ,createText : function(text){ var el = $.createEl({ id : "text" ,innerHTML : text ,align:'center' }) el.style.cssText = "color:#fff;background:#fff:margin:4px;padding:3px;top:500px;left:500;font-size:20px;position:absolute"; document.body.appendChild(el); } ,lightUp : function(id,x,y){ var self = this,i=0; setTimeout(function(){ i++; $.get(id).style.background = self.lightColor[i%self.lightColor.length]; setTimeout(arguments.callee,200); },this.param.howToShine(x,y)) } ,lightColor : ['#ff0000',"#00ff00","#ffff00","#ff6600","#66ff00"] } new chrisTree({ x : 400 ,y : 50 ,howToShine : function(x,y){return 100+x-y} }) new chrisTree({ x : 600 ,y : 50 ,howToShine : function(x,y){return Math.sqrt(x*x-2*x*y+y*y)*10} }) var ct = new chrisTree({ x : 800 ,y : 50 ,howToShine : function(x,y){return x+y} });ct.createText('Merry chrismas!:)))))'); </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：鍵盤上下鍵移動選擇table表格行的js代碼

下一篇：用Javascript同時提交多個Web表單的方法