本帖最后由 zswang 于 2010-01-14 11:19:29 编辑
解决方案 »
- 怎么用js实现延时弹出窗口
- 求 隐藏显示性 和 输入位置可控制的容器～～～～～
- 【求助】QueryString的一个问题和Ajax的onreadystatechange的一个问题
- 获取ifram返回值（xml）的问题
- javascript复制粘贴如何实现？
- 关于遨游(Maxthon)浮动广告屏蔽问题。[放分]
- 循环输出表格
- 请问如何在IE和Netscape下都可以解析XML？
- 怎样在<script></script>标签里面嵌套包含<script></script>
- JAVASCRIPT在客户端比较两个输入值的大小不能通过？
- JSON小问题，跪求指导
- 提交form时，checkbox中如果只有一个选项怎么判断其是否选中
<html>
<head><title>贺岁霓虹灯 -- 万家灯火 -- 作者：zswang</title></head>
<style>
body{overflow:hidden;background-color:Black;}
</style>
<body>
<script text="text/javascript">
function hsl2color(hsl) {
if (hsl.h > 360 || hsl.h < 0 || hsl.s > 100 || hsl.s < 0 || hsl.l > 100 || hsl.l < 0)
return "#000000";
var rgb = {r: 0, g: 0, b: 0};
if (hsl.h <= 60) {
rgb.r = 255;
rgb.g = 255 / 60 * hsl.h;
} else if (hsl.h <= 120) {
rgb.r = 255 - (255 / 60) * (hsl.h - 60);
rgb.g = 255;
} else if (hsl.h <= 180) {
rgb.g = 255;
rgb.b = (255 / 60) * (hsl.h - 120);
} else if (hsl.h <= 240) {
rgb.g = 255 - (255 / 60) * (hsl.h - 180);
rgb.b = 255;
} else if (hsl.h <= 300) {
rgb.r = (255 / 60) * (hsl.h - 240);
rgb.b = 255;
} else if (hsl.h <= 360) {
rgb.r = 255;
rgb.b = 255 - (255 / 60) * (hsl.h - 300);
}
var sat = Math.abs((hsl.s - 100) / 100);
rgb.r = rgb.r - (rgb.r - 128) * sat;
rgb.g = rgb.g - (rgb.g - 128) * sat;
rgb.b = rgb.b - (rgb.b - 128) * sat;
var lum = (hsl.l - 50) / 50;
if (lum > 0) {
rgb.r = rgb.r + (255 - rgb.r) * lum;
rgb.g = rgb.g + (255 - rgb.g) * lum;
rgb.b = rgb.b + (255 - rgb.b) * lum;
} else if (lum < 0) {
rgb.r = rgb.r + rgb.r * lum;
rgb.g = rgb.g + rgb.g * lum;
rgb.b = rgb.b + rgb.b * lum;
}
return "#" + ("00000" + (Math.floor(rgb.r) * 256 * 256 +
Math.floor(rgb.g) * 256 + Math.floor(rgb.b)
).toString(16)).replace(/^.*(.{6}$)/g, "$1");
}// 霓虹灯
function Neon(options) {
options = options || {};
this.interval = options.interval || 500; // 变化间隔时间，单位毫秒
this.parent = options.parent || document.body; // 容器
this.bulbCount = options.bulbCount || 100;
this.bulbs = {};
var h = document.body.clientHeight || document.documentElement.clientHeight;
var w = document.body.clientWidth || document.documentElement.clientWidth;
for (var i = 0; i < this.bulbCount; i++) {
this.bulbs[i] = new Bulb({
size: 10 + Math.random() * 10,
pos: {x: Math.random() * w, y: Math.random() * h},
hue: Math.random() * 360,
lightness: Math.random() * 100
});
}
}Neon.prototype = {
replay: function() {
var self = this;
setInterval(function() { self.tick(); }, this.interval);
},
tick: function() {
for (var i = 0; i < this.bulbCount; i++) {
this.bulbs[i].lightness = (this.bulbs[i].lightness + 2) % 100;
this.bulbs[i].doChange();
}
}
}// 灯泡
function Bulb(options) {
options = options || {};
this.parent = options.parent || document.body; // 容器
this.shape = options.shape || "●"; // 形状
this.size = options.size || 12; // 大小
this.pos = options.pos || {}; // 位置
this.hue = options.hue || 100; // 色相
this.saturation = options.saturation || 100; // 饱和度
this.lightness = options.lightness || 50; // 亮度 this.span = document.createElement("span");
this.parent.appendChild(this.span);
this.span.style.position = "absolute";
this.span.style.fontSize = this.size + "px";
this.span.style.left = this.pos.x + "px";
this.span.style.top = this.pos.y + "px";
this.span.innerHTML = this.shape;
this.doChange();
}Bulb.prototype = {
doChange: function() {
this.span.style.color = hsl2color(
{h: this.hue, s: this.saturation, l: this.lightness}
);
}
}new Neon().replay();
</script>
</body>
</html>
this.shape = options.shape || "★"; // 形状
看起来更绚丽些
day day upup！