【编程游戏】贺岁霓虹灯。（参观33楼zswang的霓虹灯）

最新推荐文章于 2010-01-14 11:09:00 发布

王集鹄

最新推荐文章于 2010-01-14 11:09:00 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：【编程游戏】贺岁霓虹灯。文章标签：编程游戏 function firefox 浏览器 html

本文链接：https://blog.youkuaiyun.com/zswang/article/details/5068237

【编程游戏】贺岁霓虹灯。专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的动态贺岁霓虹灯效果。通过自定义的hsl颜色转换函数和霓虹灯类，创建了动态变化的霓虹灯效果。适用于网页装饰，特别适合在Firefox浏览器中查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【编程游戏】贺岁霓虹灯。（第一名奖励10000可用分）

效果图

[目前Firefox中好使，其他浏览器需复制到本地，存为html文件看效果] <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>
[目前Firefox中好使，其他浏览器需复制到本地，存为html文件看效果]