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

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

王集鹄

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

阅读量1.8k

点赞数

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

本文链接：https://blog.csdn.net/zswang/article/details/5086798

版权

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

19 篇文章 0 订阅

订阅专栏

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

效果图

[目前Firefox中好使，其他浏览器需复制到本地，存为html文件看效果] <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>javascript霓虹灯 - 新年快乐Happy New Year</title>  <meta name="author" content="dh20156@www.w3cgroup.com" /> <meta name="keywords" content="javascript,霓虹灯" /> <meta name="description" content="新年快乐Happy New Year" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <style type="text/css"> html,body{background:#000;text-align:center;} .neon{border:none;} .neon *{margin:0;padding:0;} .neon td{font-size:0;line-height:0;} .vneon td{background:red;width:2px;height:238px;} .hneon td{background:blue;width:798px;height:2px;} .wrap{width:800px;height:240px;margin:0 auto;position:relative;} #txt{margin:0;position:absolute;left:0;top:0;z-index:3;font-family:verdana;font-size:60px;color:white;width:798px;text-align:center;height:238px;line-height:238px;filter:glow(color=red,Strength=8);} #vneon{position:absolute;left:0;top:0;z-index:2;} #hneon{position:absolute;left:0;top:0;z-index:1;} </style> </head> <body> <div class="wrap"> <h1 id="txt">HappyNewYear<sup>新年快乐</sup></h1> <div id="vneon">vneon</div> <div id="hneon">hneon</div> </div> </body> <script type="text/javascript"> var hsb2rgb = function(h,s,b){var nH,nS,nV,nR,nG,nB,hi,f,p,q,t;nH=h/360,nS=s/100,nV=b/100;if(!s){nR=nV*255|0,nG=nV*255|0,nB=nV*255|0;nR=(nR<0)?0:nR,nG=(nG<0)?0:nG,nB=(nB<0)?0:nB;return[nR,nG,nB];}hi=nH*6;if(hi==6){hi=0;}f=hi|0,p=nV*(1-nS),q=nV*(1-nS*(hi-f)),t=nV*(1-nS*(1-(hi-f)));switch(f){case 0:nR=nV,nG=t,nB=p;break;case 1:nR=q,nG=nV,nB=p;break;case 2:nR=p,nG=nV,nB=t;break;case 3:nR=p,nG=q,nB=nV;break;case 4:nR=t,nG=p,nB=nV;break;default:nR=nV,nG=p,nB=q;break;}nR=nR*255|0,nG=nG*255|0,nB=nB*255|0;nR=(nR<0)?0:nR,nG=(nG<0)?0:nG,nB=(nB<0)?0:nB;return[nR,nG,nB];}; var newcanvas = function(c,r){var std = new Array(c+1).join('<td></td>');var str = new Array(r+1).join('<tr>'+std+'</tr>');return '<table cellspacing="2" cellpadding="0">'+str+'</table>';}; var neonEffect = { chromatogram:function(h,speed,showtimer){ var starth = isNaN(h)?0:(h>360)?0:(h<0)?0:h,speed = speed||10,me = this,srgb = 'rgb('+hsb2rgb(starth,100,100).join(',')+')'; this.style.background = srgb; var show = function(){ if(starth>=360){starth = 0;} var srgb = 'rgb('+hsb2rgb(starth,100,100).join(',')+')'; me.style.background = srgb; starth+=speed; showtimer = window.setTimeout(arguments.callee,1); }; show(); } }; var neon = function(type,effect){ this.stype = ['neon vneon','neon hneon'][(isNaN(type)?0:type>1?1:type)]; this.className = this.stype; this.effect = effect||'chromatogram'; this.afterin = null; this.afterout = null; this.showtimer = null; this.setalpha = function(iopacity){ this.style.opacity = iopacity/100; this.style.filter = 'alpha(opacity='+iopacity+')'; }; this.easyin = function(){ var me = this,iopacity = 5; var innerfoo = function(){ if(iopacity>=100){if(me.afterin){me.afterin();}return;} iopacity += 5; me.setalpha(iopacity); window.setTimeout(arguments.callee,100); }; innerfoo(); }; this.easyout = function(){ var me = this,iopacity = 100; var innerfoo = function(){ if(iopacity<=20){if(me.afterout){me.afterout();}return;} iopacity -= 5; me.setalpha(iopacity); window.setTimeout(arguments.callee,100); }; innerfoo(); }; this.turnon = function(){this.style.display = 'block';}; this.turnoff = function(){this.style.opacity = 0,this.style.filter = 'alpha(opacity=0)';this.style.display = 'none';}; this.init = function(){ this.turnoff(); var drow = this.rows,lr = drow.length,lc = drow[0].cells.length,stype = this.stype,classEffect = neonEffect[this.effect]; var ismsie = /msie/i.test(navigator.appVersion); var showtimer = this.showtimer,sh = 0,sp1 = ismsie?20:10,sp2 = ismsie?10:5; if(stype=='neon vneon'){ for(var c=0;c<lc;c++){classEffect.call(drow[0].cells[c],sh,sp1,showtimer);sh += 1;} }else{ for(var r=0;r<lr;r++){classEffect.call(drow[r].cells[0],sh,sp2,showtimer);sh += 1;} } }; this.init(); }; var dv = document.getElementById('vneon'); dv.innerHTML = newcanvas(200,1); var dvneon = dv.childNodes[0]; neon.call(dvneon,0,'chromatogram'); dvneon.afterin = function(){window.setTimeout(function(){dvneon.easyout();},5000);}; dvneon.afterout = function(){dvneon.turnoff();dhneon.turnon();dhneon.easyin();}; dvneon.turnon(); dvneon.easyin(); var dh = document.getElementById('hneon'); dh.innerHTML = newcanvas(1,60); var dhneon = dh.childNodes[0]; neon.call(dhneon,1,'chromatogram'); dhneon.afterin = function(){window.setTimeout(function(){dhneon.easyout();},5000);}; dhneon.afterout = function(){dhneon.turnoff();dvneon.turnon();dvneon.easyin();}; </script> </html>
[目前Firefox中好使，其他浏览器需复制到本地，存为html文件看效果]