不到 1KB 的JavaScript 寫出來的超強功能展示

以前本站發佈過很多和Javascript相關的東西，如：《又一個Javascript試驗田》、《一個Windows 3.1的Web網站》、《哥是玩程序的》。今天要介紹另外一組，先看下面的這個Javascript特效（在IE下無法正常工作），你可以用Chrome查看，很炫。不過最炫的是其源碼，非常的簡單，不超過1K。如果你要知道這個效果的原理，這裡有一個教程。這裡有個網站：JS1K Demo， 這個站上主要收集一些Javascript不大於1K的程序

停止演示開始演示

下面是其源碼：

f=Math; _=document.body; _.style.background="#000"; e=_.children[0]; e.width=w=innerWidth-10; e.height=h=innerHeight-25; g=e.getContext("2d"); t=w/h; with(g){scale(w*0.5/t,h*0.5); translate(1*t,1); globalCompositeOperation="lighter"; lw=45/h; $=p=m=q=r=d=0; g=u=-8; setInterval(function(){if(--d< 0){h=f.random; e=h()*18-9; r2=h()*18-9; u2=h()*18-9; d=70}function A(C,B){return C+(B-C)*0.04}p=A(p,e); m=A(m,r2); g=A(g,u2); q=A(q,p); r=A(r,m); u=A(u,g); a=f.atan2(q,-u*2); b=f.atan2(r*2,f.sqrt(u*u+q*q)); $+=0.05; clearRect(-t,-1,2*t,2); for(i=12; i; --i){v=0; for(j=45; j; ){c=f.cos; s=f.sin; j--; w=$-j*0.03-i*3; A=f.sqrt(j+0.2); n=c(w+s(w*0.31))*2+s(w*0.83)*3+w*0.02; o=s(w*0.7)-c(3+w*0.23)*3; x=c(n)*c(o)*A-q; y=s(n)*c(o)*A-r; z=s(o)*A-u; n=c(a); o=s(a); k=x*n+z*o; h=z*n-x*o; n=c(b); o=s(b); l=y*n+h*o; z=h*n-y*o; lineTo(k/z,l/z); lineWidth=lw*(2+!j)/z; h=f.round; w=h(60-j)*(1+!j+f.max(0,s($*6-j/8)-0.95)*70); strokeStyle="rgb("+h(w*(!j+s(i+$*0.15)+1))+","+h(!j+w*(s(i-1)+1))+","+h(!j+w*(s(i-1.3)+1))+")"; if(z> 0.1){v++&&stroke()}else{v=0}beginPath(); moveTo(k/z,l/z)}}},33)}

下面，讓我們再看一個只有1023字節的3D演示，同樣，只有在Chrome中才能看到最佳效果。

停止演示開始演示

其源代碼如下：

with(document.body.style){margin="0px";overflow="hidden";}var w=window.innerWidth;var h=window.innerHeight;var ca=document.getElementById("c");ca.width=w;ca.height=h;var c=ca.getContext("2d");m=Math;fs=m.sin;fc=m.cos;fm=m.max;setInterval(d,30);function p(x,y,z){return{x:x,y:y,z:z};}function s(a,z){r=w/10;R=w/3;b=-20*fc(a*5+t);return p(w/2+(R*fc(a)+r*fs(z+2*t))/z+fc(a)*b,h/2+(R*fs(a))/z+fs(a)*b);}function q(a,da,z,dz){var v=[s(a,z),s(a+da,z),s(a+da,z+dz),s(a,z+dz)];c.beginPath();c.moveTo(v[0].x,v[0].y);for(i in v)c.lineTo(v[i].x,v[i].y);c.fill();}var Z=-0.20;var t=0;function d(){t+=1/30.0;c.fillStyle="#000";c.fillRect(0,0,w,h);c.fillStyle="#f00";var n=30;var a=0;var da=2*Math.PI/n;var dz=0.25;for(var z=Z+8;z>Z;z-=dz){for(var i=0;i<n;i++){fog=1/(fm((z+0.7)-3,1));if(z<=2){fog=fm(0,z/2*z/2);}var k=(205*(fog*Math.abs(fs(i/n*2*3.14+t))))>>0;k*=(0.55+0.45*fc((i/n+0.25)*Math.PI*5));k=k>>0;c.fillStyle="rgb("+k+","+k+","+k+")";q(a,da,z,dz);if(i%3==0){c.fillStyle="#000";q(a,da/10,z,dz);}a+=da;}}Z-=0.05;if(Z<=dz)Z+=dz;}

你可以前往一看更多的演示。