javascript 闪烁的圣诞树实现代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 闪烁的圣诞树实现代码

技术文章搜索

关键字

Javascript 中的 javascript 闪烁的圣诞树实现代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 232 ::

收藏到网摘: n/a

用Javascript同时提交多个Web表单的方法键盘上下键移动选择table表格行的js代码

用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 全选提示:你可先修改部分代码,再按运行]

用Javascript同时提交多个Web表单的方法键盘上下键移动选择table表格行的js代码

Javascript 中的 javascript 闪烁的圣诞树实现代码

评论 (0) All