【编程游戏】贺岁霓虹灯。（参观105楼web

本文介绍了一款使用HTML、CSS和JavaScript实现的贺岁霓虹灯效果，通过动态生成不同颜色的灯光和随机显示的广告文字，营造出节日氛围。代码中详细展示了如何创建动态元素、设置样式以及定时更新显示内容。

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

效果图

评分

参观 [目前Firefox中好使，其他浏览器需复制到本地，存为html文件看效果] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Ad</title> <style type="text/css"> body{margin:0;padding:0;background:black;} </style> </head> <body> <script type="text/javascript"> var ad=function(r){ this.colors=['red','yellow','blue','green','white','orange']; this.txts=['广告位招租','有意者请联系xxx']; this.lights=[]; this.txt=null; this.radius=r||200; this.rad=Math.PI/180; this.pos={x:document.documentElement.clientWidth/2,y:document.documentElement.clientHeight/2}; }; ad.prototype={ getColor:function(){ return this.colors[Math.round(Math.random()*(this.colors.length-1))]; }, getTxt:function(){ return this.txts[Math.round(Math.random()*(this.txts.length-1))]; }, circle:function(){ for(i=0;i<=360;i+=5){ this.turnOn(this.radius*Math.cos(i*this.rad)+this.pos.x,this.radius*Math.sin(i*this.rad)+this.pos.y,this.getColor()); } this.drawTxt(this.getColor(),this.getTxt(),18); this.start(); }, turnOn:function(x,y,c){ var light=document.createElement("div"); light.style.cssText='position:absolute;left:'+x+'px;top:'+y+'px;font-size:12px;color:'+c+';'; light.innerHTML='●'; document.body.appendChild(light); this.lights.push(light); }, turnOff:function(){ for(var i=0;i<this.lights.length;i++){ document.body.removeChild(this.lights[i]); this.lights.pop(this.lights[i]); i--; } }, drawTxt:function(c,t,s){ var txt=document.createElement("div"); txt.innerHTML=t; txt.style.cssText='position:absolute;font-size:'+s+'px;color:'+c+';'; document.body.appendChild(txt); txt.style.left=(this.pos.x-txt.offsetWidth/2)+'px'; txt.style.top=(this.pos.y-txt.offsetHeight/2)+'px'; this.txt=txt; }, changeTxt:function(){ this.txt.style.color=this.getColor(); this.txt.innerHTML=this.getTxt(); this.txt.style.left=(this.pos.x-this.txt.offsetWidth/2)+'px'; this.txt.style.top=(this.pos.y-this.txt.offsetHeight/2)+'px'; }, changeLight:function(){ for(var i=0;i<this.lights.length;i++){ this.lights[i].style.color=this.getColor(); } }, start:function(){ var me=this; this.changeLight(); this.changeTxt(); setTimeout(function(){me.start();},300); } }; new ad().circle(); </script> </body> </html>
参观 [目前Firefox中好使，其他浏览器需复制到本地，存为html文件看效果]