javascript 闪烁的圣诞树实现代码

更新时间：2009年12月26日 02:28:48 作者：

用js实现非常漂亮的带闪烁效果的圣诞树代码。很佩服作者的想法。效果如下图。

<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需再刷新一下页面才能执行]

您可能感兴趣的文章:

利用css+原生js制作简单的钟表
这篇文章主要为大家详细介绍了如何利用css+原生js制作简单的钟表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
javascript时间排序算法实现活动秒杀倒计时效果
这篇文章主要介绍了javascript时间排序算法实现活动秒杀倒计时效果，即一个页面多个倒计时排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-03-03
typescript 将数组清空的方法实现
在开发应用程序时,数组常用于存储多个元素（如数字、字符串、对象等）,然而,在某些场景下,你可能需要将数组清空,本文主要介绍了typescript 将数组清空的方法实现,感兴趣的可以了解一下
2024-08-08
js过滤HTML标签完整实例
这篇文章主要介绍了js过滤HTML标签实现方法,以完整实例形式分析了JavaScript使用正则表达式过滤HTML标签的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
浅谈layui里的上传控件问题
今天小编就为大家分享一篇浅谈layui里的上传控件问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果分享
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果分享，需要的朋友可以参考一下
2013-06-06
微信小程序模板和模块化用法实例分析
这篇文章主要介绍了微信小程序模板和模块化用法,结合实例形式分析了微信小程序中的模板与模块化概念与简单使用技巧,需要的朋友可以参考下
2017-11-11
JS数据类型STRING使用实例解析
这篇文章主要介绍了JS数据类型STRING使用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
JavaScript常用代码书写规范的超全面总结
这篇文章给大家全面总结了JavaScript常用代码的书写规范，分别利用推荐和不推荐的两种示例代码让大家更能直接的了解书写规范，其实关于javascript代码规范我们应该遵循古老的原则：“能做并不意味着应该做”，好了，下面我们就来一起看看吧。
2016-09-09
Varlet组件实现一个丝滑的点击水波效果详解
这篇文章主要为大家介绍了Varlet组件实现一个丝滑的点击水波效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10

javascript 闪烁的圣诞树实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具