dansk Fyrværkeri på hjemmesiden med Javascript

 

Dette script giver dig fyrværkeri på din hjemmeside. Ganske enkelt. Så nu er du sikker på at få et godt nytår - på din hjemmeside :-)

Selve javascriptet har jeg samlet i en fil, med navnet firework.js. Fyrværkeriet kan dernæst meget enkelt tilføjes de ønskede sider, hvor animationen skal vises, ved blot at skrive en enkelt kode, der henter javascriptet firework.js

Dette javascript virker i følgende browsere: Mozilla Firefox 1, Netscape 7 og Internet Explorer 6, og er XHTML 1.0-validateret af W3C


 
 

Start med at gemme billederne med raketter på dit websted:

Opret en fil med navnet firework.js og gem den på dit websted. Filen skal indeholde følgende kode, og IKKE andet...
HUSK: At ændre stien hvor billederne med raketter er placeret...
EKSTRA: Du kan ændre antallet af Raketter i et fyrværkeri...
EKSTRA: Du kan også justere Pausen mellem fyrværkerierne i sekunder...
EKSTRA: Hvis true: Raketterne har den samme farve i et fyrværkeri, ellers false: Raketterne har forskellige farver

Download evt. filen firework.js her: firework.js

////////////////////////////////////////////////////////////////
// Javascript made by Rasmus - http://www.peters1.dk //
////////////////////////////////////////////////////////////////

var FIRE_Path = "http://www.domain.com/firework/"; // Sti til mappen med fyrværkeri-billeder
var FIRE_no = 10; // Antal Rakketter ad gangen
var FIRE_Pause = 5; // Pause mellem hver fyrværkeri i sekunder
var FIRE_SameColor = false; // true = Rakketterne har samme farve pr. gang.

var FIRE_Time, FIRE_Bang, FIRE_Vindue_Width, FIRE_Vindue_Height;
var FIRE_PosLeft, FIRE_PosTop, FIRE_PosVenAfv, FIRE_PosTopAfv;
var i;
var FIRE_j = 0;

var FIRE_browser_IE_NS = (document.body.clientHeight) ? 1 : 0;
var FYR_browser_IE_SCM = (document.documentElement.clientHeight) ? 1 : 0;
var FIRE_browser_MOZ = (self.innerWidth) ? 1 : 0;

if (FIRE_browser_IE_NS)
{
	FIRE_Vindue_Width = document.body.clientWidth;
	FIRE_Vindue_Height = document.body.clientHeight;
}
else if (FYR_browser_IE_SCM)
{
	FIRE_Vindue_Width = document.documentElement.clientWidth;
	FIRE_Vindue_Height = document.documentElement.clientHeight;
}
else
{
	FIRE_Vindue_Width = self.innerWidth - 20;
	FIRE_Vindue_Height = self.innerHeight;
}

var FIRE_Top = 10;
var FIRE_Bot = FIRE_Vindue_Height - 40;
var FIRE_Mid = FIRE_Vindue_Width/2;

FIRE_PosLeft = new Array();
FIRE_PosTop = new Array();
FIRE_PosVenAfv = new Array();
FIRE_PosTopAfv = new Array();
FIRE_Time = new Array();
FIRE_TopBang = new Array();
FIRE_Billede = new Array();
FIRE_Farve = new Array("orange","blue","yellow","red","green");
FIRE_Pause = FIRE_Pause*1000;

for (i = 0; i < FIRE_no; ++ i) 
{  
	FIRE_TopBang[i] = FIRE_Top + Math.random()*200;
	FIRE_PosTop[i] = FIRE_Bot;
	FIRE_PosTopAfv[i] = 0;
	FIRE_PosLeft[i] = FIRE_Mid;
	if (i % 2 == 0) FIRE_PosVenAfv[i] = 4*Math.random(); 
	else FIRE_PosVenAfv[i] = Math.random()*(-4); 
	document.write("<\div id=\"FIRE_no"+ i +"\" style=\"position: absolute; font-size: 15px; z-index: "+ i +"; visibility: visible; top: "+FIRE_PosTop[i]+"px; left: "+FIRE_PosLeft[i]+"px;\"><a href=\"http://www.peters1.dk\" target=\"_blank\"><b>.</b></a><\/div>");
}


function FIRE_Op(FIRE_number)
{
	if (FIRE_PosTop[FIRE_number] > (FIRE_Top + FIRE_TopBang[FIRE_number])) 
	{
		FIRE_PosTop[FIRE_number] = FIRE_PosTop[FIRE_number] - FIRE_PosTopAfv[FIRE_number];
		FIRE_PosLeft[FIRE_number] = FIRE_PosLeft[FIRE_number] + FIRE_PosVenAfv[FIRE_number];
		FIRE_PosTopAfv[FIRE_number] = (FIRE_PosTop[FIRE_number]/40);
		document.getElementById("FIRE_no"+FIRE_number).style.top=FIRE_PosTop[FIRE_number]+"px";
		document.getElementById("FIRE_no"+FIRE_number).style.left=FIRE_PosLeft[FIRE_number]+"px";
		FIRE_Time[i] = setTimeout("FIRE_Op("+FIRE_number+")",10);
	}
	else
	{
		clearTimeout("FIRE_Time["+FIRE_number+"]");
		FIRE_ShowBang(FIRE_number);
	}
}

function FIRE_Start() 
{  

if (FIRE_SameColor)
{
if (FIRE_j == 4) FIRE_j = 0;
else FIRE_j = FIRE_j + 1;
}

for (i = 0; i < FIRE_no; i++) 
{ 
	if (!FIRE_SameColor)
	{
	FIRE_j = Math.round(Math.random() * 4); 
	}
	FIRE_Billede[i] = FIRE_Path+FIRE_Farve[FIRE_j]+".gif";
	document.getElementById("FIRE_no"+i).innerHTML = "<b>*</b>";
	document.getElementById("FIRE_no"+i).style.color=FIRE_Farve[FIRE_j];
	setTimeout("FIRE_Op("+i+")",(1500*Math.random()));
}
}

function FIRE_ShowBang(FIRE_number)
{
	if (FIRE_number == 0) document.getElementById("FIRE_no"+FIRE_number).innerHTML = "<a href=\"http://www.peters1.dk\" target=\"_blank\"><\img src=\""+FIRE_Billede[FIRE_number]+"\" border=\"0\" /></a>";
	else document.getElementById("FIRE_no"+FIRE_number).innerHTML = "<\img src=\""+FIRE_Billede[FIRE_number]+"\" border=\"0\" />";
	document.getElementById("FIRE_no"+FIRE_number).style.top=(FIRE_PosTop[FIRE_number] - 20)+"px";
	document.getElementById("FIRE_no"+FIRE_number).style.left=(FIRE_PosLeft[FIRE_number] - 40)+"px";
	setTimeout("FIRE_Reset("+FIRE_number+")",1000)
}

function FIRE_Reset(FIRE_number)
{
	FIRE_TopBang[FIRE_number] = FIRE_Top + Math.random()*100;
	FIRE_PosTop[FIRE_number] = FIRE_Bot;
	FIRE_PosTopAfv[FIRE_number] = 4;
	FIRE_PosLeft[FIRE_number] = FIRE_Mid;
	if (FIRE_number % 2 == 0) FIRE_PosVenAfv[FIRE_number] = 4*Math.random(); 
	else FIRE_PosVenAfv[FIRE_number] = Math.random()*(-4); 
	
	document.getElementById("FIRE_no"+FIRE_number).innerHTML = "";
	document.getElementById("FIRE_no"+FIRE_number).style.top=FIRE_PosTop[FIRE_number]+"px";
	document.getElementById("FIRE_no"+FIRE_number).style.left=FIRE_PosLeft[FIRE_number]+"px";

	if (FIRE_number == FIRE_no-1) setTimeout("FIRE_Start()",FIRE_Pause);
}

FIRE_Start();

Denne html kode skal indsættes lige efter <body> på de websider, hvor fyrværkeriet skal vises:
HUSK: At ændre adressen til der hvor du har placeret filen firework.js

<script type="text/javascript" src="http://www.domain.com/firework/firework.js"></script>

 

Kunne du bruge scriptet? Donér venligst lidt småskillinger...



...til fortsat at kunne forbedre hjemmesiden :-)
Fyrværkeri på hjemmesiden med Javascript

Javascript Animated Firework on webpage

Animoitu Javascript Ilotulitus verkkosivulla

vuurwerk op je website

Un feu d'artifice animé en JavaScript sur votre page web

Animowane sztuczne ognie w Javascript na strone

Анимированный фейерверк на javascript

This page in english Javascript Animated Firework on webpage
Sivu suomi Animoitu Javascript Ilotulitus verkkosivulla
Deze pagina in het Nederlands vuurwerk op je website
Cette page en français Un feu d'artifice animé en JavaScript sur votre page web
Strona w języku polskim Animowane sztuczne ognie w Javascript na strone
Эта страница на русском Анимированный фейерверк на javascript
 
Forsiden Se/skriv i min gæstebog Sitemap Send mail   Bookmark and Share

De sidste 5 indlæg i gæstebogen er fra:
Portugal Brasil Australia Canada Pilipinas 
Valid XHTML 1.0!