نمونه اسکریپت:
در صورتی که مرورگر شما از این اسکریپت پشتیبانی کند، در کادر زیر نور افشانی را مشاهده می نمایید.
کد اسکریپت:
<!-- ONE STEP TO INSTALL FIREWORKS: 1. Copy the coding into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the BODY of your HTML document --> <base target="_blank"> <BODY bgcolor="#000000"> <layer name="a0" left=10 top=10 visibility=show bgcolor="#ffffff" clip="0,0,1,1"></layer> <layer name="a1" left=10 top=10 visibility=show bgcolor="#fff000" clip="0,0,1,1"></layer> <layer name="a2" left=10 top=10 visibility=show bgcolor="#ffa000" clip="0,0,1,1"></layer> <layer name="a3" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer> <layer name="a4" left=10 top=10 visibility=show bgcolor="#00ff00" clip="0,0,1,1"></layer> <layer name="a5" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer> <layer name="a6" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,1,1"></layer> <layer name="a7" left=10 top=10 visibility=show bgcolor="#ffffff" clip="0,0,1,1"></layer> <layer name="a8" left=10 top=10 visibility=show bgcolor="#fff000" clip="0,0,1,1"></layer> <layer name="a9" left=10 top=10 visibility=show bgcolor="#ffa000" clip="0,0,1,1"></layer> <layer name="a10" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer> <layer name="a11" left=10 top=10 visibility=show bgcolor="#00ff00" clip="0,0,2,2"></layer> <layer name="a12" left=10 top=10 visibility=show bgcolor="#0000ff" clip="0,0,2,2"></layer> <layer name="a13" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,2,2"></layer> <div id="starsDiv" style="position:absolute;top:0px;left:0px"> <div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px"></div> <div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px"></div> <div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px"></div> <div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px"></div> <div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px"></div> <div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px"></div> <div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px"></div> <div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px"></div> <div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px"></div> <div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px"></div> <div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px"></div> <div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px"></div> <div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px"></div> <div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px"></div> </div> <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Kurt Grigg (kurt.grigg@virgin.net) --> <!-- Web Site: http://freespace.virgin.net/kurt.grigg --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin var Clrs = new Array(9); Clrs[0] = 'ff0000'; Clrs[1] = '00ff00'; Clrs[2] = '000aff'; Clrs[3] = 'ff00ff'; Clrs[4] = 'ffa500'; Clrs[5] = 'ffff00'; Clrs[6] = '00ff00'; Clrs[7] = 'ffffff'; Clrs[8] = 'fffff0'; var sClrs = new Array(5); sClrs[0] = 'ffa500'; sClrs[1] = '55ff66'; sClrs[2] = 'AC9DFC'; sClrs[3] = 'fff000'; sClrs[4] = 'fffff0'; var yBase; var xBase; var step; var currStep = 0; var Xpos = 1; var Ypos = 1; var initialStarColor = 'ffa000'; var Mtop = 250; var Mleft = 250; function Fireworks() { if (document.all) { yBase = window.document.body.offsetHeight / 3; xBase = window.document.body.offsetWidth / 8; } else if (document.layers) { yBase = window.innerHeight / 3; xBase = window.innerWidth / 8; } if (document.all) { step = 5; for ( i = 0 ; i < starsDiv.all.length ; i++ ) { for (ai = 0; ai < Clrs.length; ai++) { var c = Math.round(Math.random()*[ai]); } if (currStep < 90) starsDiv.all[i].style.background=initialStarColor; if (currStep > 90) starsDiv.all[i].style.background=Clrs[c]; starsDiv.all[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100) starsDiv.all[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100) } } else if (document.layers) { step = 5; for ( j = 0 ; j < 14 ; j++ ) { //number of NS layers! var templayer = "a"+j; for (ai = 0; ai < Clrs.length; ai++) { var c = Math.round(Math.random()*[ai]); } if (currStep < 90) document.layers[templayer].bgColor=initialStarColor; if (currStep > 90) document.layers[templayer].bgColor=Clrs[c]; document.layers[templayer].top = Mtop + yBase*Math.sin((currStep+j*5)/3)*Math.sin(550+currStep/100) document.layers[templayer].left = Mleft + yBase*Math.cos((currStep+j*5)/3)*Math.sin(550+currStep/100) } } currStep+= step; T=setTimeout("Fireworks()",5); if (currStep == 220) { currStep = -10; for (n = 0; n < sClrs.length; n++) { var k = Math.round(Math.random()*n); } initialStarColor = sClrs[k]; if (document.all) { Dtop = window.document.body.clientHeight - 250; Dleft = xBase * 3.5; Mtop = Math.round(Math.random()*Dtop); Mleft = Math.round(Math.random()*Dleft); document.all.starsDiv.style.top = Mtop+document.body.scrollTop; document.all.starsDiv.style.left = Mleft+document.body.scrollLeft; } else if (document.layers) { Dleft = window.innerWidth - 100; Dtop = window.innerHeight - 100; Mtop = Math.round(Math.random()*Dtop+window.pageYOffset); Mleft = Math.round(Math.random()*Dleft+window.pageXOffset); document.layers[templayer].top = Mtop; document.layers[templayer].left = Mleft; } if ((Mtop < 20) || (Mleft < 20)) { Mtop += 90; Mleft += 90; } } } Fireworks(); // End --> </script> <p> <p> <!-- TWO STEPS TO INSTALL FIREWORKS 2: 1. Copy the coding into the HEAD of your HTML document 2. Add the last code into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document --> <HEAD> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Original: Jacco IJzerman (j.ijzerman1@chello.nl ) --> <!-- Web Site: http://variomatic.quickhost.nl --> <!--[if IE ]> <style type="text/css"> body { overflow: hidden; } v\:* { behavior: url(#default#VML); } </style> <![endif]--> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <BODY bgcolor="#000000"> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Original: Jacco IJzerman (j.ijzerman1@chello.nl ) --> <!-- Web Site: http://variomatic.quickhost.nl --> <!--[if IE ]> <script language="JavaScript"> colors = new Array(); // Define your own color combinations colors[0] = new Array('yellow', 'lime'); colors[1] = new Array('silver', 'green') colors[2] = new Array('silver', 'blue'); colors[3] = new Array('silver', 'purple'); colors[4] = new Array('purple', 'white'); colors[5] = new Array('blue', 'silver'); colors[6] = new Array('red', 'fuchsia'); colors[7] = new Array('yellow', 'red'); // Define the maximum number of fire arrows maximum = 1000; vmlobj=''; for(i = 0; i < 12; i++){ vmlobj += '<div id="ster'+i+'" style="position:absolute; left:-50px; top-50px; visibility:hidden; z-index:50;">'; vmlobj += '<v:shape style="width:15px; height:15px;" fillcolor="yellow" coordorigin="0,0" coordsize="200 200">'; vmlobj += '<v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e"/>'; vmlobj += '<v:stroke on="false" /></v:shape></div>'; } document.write(vmlobj); vmlobj = null; aantal = 0; function begin() { try { if(aantal == maximum){ return;} kleurschema = Math.floor(Math.random() * colors.length); posLinks = Math.floor(Math.random() * (document.body.clientWidth - 180)); posLinks = (posLinks < 170)? 170: posLinks; posBoven = Math.floor(Math.random() * (document.body.clientHeight - 180)); posBoven = (posBoven < 170)? 170: posBoven; straal = 0; uiteen = true; teller = 1; flikkereffect = false; for(var i = 0; i < 12; i++){ document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][0]); document.getElementById('ster'+i).style.visibility = 'hidden'; // 5.0 fix document.getElementById('ster'+i).style.left = posLinks; document.getElementById('ster'+i).style.top = posBoven; } document.getElementById('ster0').style.top = (document.body.clientHeight - 20); document.getElementById('ster0').style.visibility = 'visible'; omhoog(); } catch(e){} } function omhoog() { try { positie = parseInt(document.getElementById('ster0').style.top); if(positie > posBoven){ document.getElementById('ster0').style.top = (positie - 25); setTimeout('omhoog()', 50); } else { for(i = 1; i < 12; i++){ document.getElementById('ster'+i).style.top = positie; document.getElementById('ster'+i).style.visibility = 'visible'; } uiteenspatten(); } } catch(e){} } function uiteenspatten() { try { if(straal > 120 && straal % 10 == 0){ flikkereffect = true; teller = (teller == colors[kleurschema].length)? 0: (teller+1); } for(var i = 0; i < 12; i++){ var hoek = i * 30; var piHoek = Math.PI - Math.PI / 180 * hoek; var links = posLinks + Math.round(straal * Math.sin(piHoek)); var boven = positie + Math.round(straal * Math.cos(piHoek)); document.getElementById('ster'+i).style.left = links; document.getElementById('ster'+i).style.top = boven; if(flikkereffect){ document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][teller]); } } if(straal < 160 && uiteen){ straal += (straal < 120)? 10: 5; setTimeout('uiteenspatten()', 50); } else if(straal > 120){ uiteen = false; straal -= 5; setTimeout('uiteenspatten()', 50); } else if(straal <= 120){ for(var i = 0; i < 12; i++){ document.getElementById('ster'+i).style.visibility = 'hidden'; } aantal++; setTimeout('begin()', 500); } } catch(e) {} } window.onload=begin; </script> <![endif]-->