Forum PHP.pl > [JS] Jak połączyć ze sobą 2 skrypty

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JS] Jak połączyć ze sobą 2 skrypty

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

damian302

9.12.2010, 15:22:51

Witam.

Odrazu zaznaczam, że jestem zielony w tych sprawach ale chcę się nauczyć, a przynajmniej spróbować. Znalazłem sobie dwa skrypty. Pierwszy odlicza czas, który pozostał do określonej daty.
Wygląda on tak (u mnie zapisany jako "data.js"):

[HTML] pobierz, plaintext 
/* Tutaj podaj datę do której ma odliczać skrypt */ 
var Endjahr = 2010; // Rok (2007-...) 
var Endmonat = 11; // miesiąc (1-12) o 1 mniej niz aktualny
var Endtag = 31; // dzień (1-31) 
var Endstunde = 0; // godzina (0-23) 
var Endminute = 0; // minuta (0-59) 
var Endsekunde = 0; // sekunda (0-59) 
var ENDE="Szczęśliwego Nowego 2011 Roku!!!"; //Komunikat, kiedy odliczanie dobiegło końca (musi być w cudzysłowie) 
 
var rechnen=0; 
var Jahr=31536000000; 
var Monat=Jahr/12; 
var Tag=Jahr/365; 
var Stunden=Tag/24; 
var Minuten=Stunden/60; 
var Sekunden=Minuten/60; 
var Jahr1; 
var Monat1; 
var Tag1; 
var Stunden1; 
var Minuten1; 
var Sekunden1; 
var i; 
var NIX=new Array(); 
var Anfang=new Date(); 
var Ende=new Date(); 
 
Ende.setYear(Endjahr) 
Ende.setMonth(Endmonat) 
Ende.setDate(Endtag) 
Ende.setHours(Endstunde) 
Ende.setMinutes(Endminute) 
Ende.setSeconds(Endsekunde) 
 
function countdown() 
{ 
NIX[0]=0; 
NIX[1]=0; 
NIX[2]=0; 
 
var Anfang=new Date(); 
Anfang.getYear(); 
Anfang.getMonth(); 
Anfang.getDate(); 
Anfang.getHours(); 
Anfang.getMinutes(); 
Anfang.getSeconds(); 
rechnen=Ende-Anfang; 
 
if(!(rechnen<=0)) 
{ 
if(rechnen<32000) 
{ 
i=parseInt(rechnen/1000); 
i<10?NIX[3]='0':NIX[3]=''; 
document.datum.DD.value='00:00:'+NIX[3]+i; 
} else { 
Jahr1=parseInt(rechnen/Jahr); 
rechnen=rechnen-Jahr1*Jahr; 
Monat1=parseInt(rechnen/Monat); 
rechnen=rechnen-Monat1*Monat; 
Tag1=parseInt(rechnen/Tag); 
rechnen=rechnen-Tag1*Tag; 
Stunden1=parseInt(rechnen/Stunden); 
rechnen=rechnen-Stunden1*Stunden; 
Minuten1=parseInt(rechnen/Minuten); 
rechnen=rechnen-Minuten1*Minuten; 
Sekunden1=parseInt(rechnen/Sekunden); 
Jahr1==0?Jahr1='':Jahr1='Rok: '+ Jahr1+'    '; 
Monat1==0?Monat1='':Monat1='miesiąc: '+ Monat1+'    '; 
Tag1==0?Tag1='':Tag1='dni: '+ Tag1+'    ';
 
 
Stunden1>9?NIX[0]='':NIX[0]=0; 
Minuten1>9?NIX[1]='':NIX[1]=0; 
Sekunden1>9?NIX[2]='':NIX[2]=0; 
 
if (Ende-Anfang < 0) { 
document.datum.DD.value=ENDE; 
} else { 
document.datum.DD.value = Jahr1 + '' + Monat1 + '' + Tag1 + 'godzin: ' + NIX[0] + '' + Stunden1 + ' minut: ' + NIX[1] + '' + Minuten1 + ' sekund: ' + NIX[2] + '' + Sekunden1; 
} 
} 
} else { 
clearInterval(ID); 
document.datum.DD.value=ENDE; 
} 
} 
var ID=setInterval('countdown()',1);
[HTML] pobierz, plaintext

drugi (u mnie "fajerwerki.js"):

[HTML] pobierz, plaintext 
var FIRE_Path = "D:/damian/strony/koniec roku/firework/"; // Pełna ściezka do katalogu zawierajacego obrazki sztucznych ogni
var FIRE_no = 20; // Liczba petard w jednym sztucznym ogniu
var FIRE_Pause = 1; // Odstep pomiedzy sztucznymi ogniami w sekundach
var FIRE_SameColor = false; // true = Petardy maja ten sam kolor w jednym sztucznym ogniu
 
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;\"><\/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 = "<\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();
[HTML] pobierz, plaintext

Chodzi o to aby jak "data.js" zakończy liczyć i wyświetli komunikat to był widoczny ten komunikat i do tego wystartował skrypt "fajerwerki.js". Na stronie (index.html) w tagu <body></body> daje:

Kod

Jak już pisałem jestem zielony i proszę o jasne i zrozumiałe odpowiedzi gdzie i co zmienić, która linia. Specjalnie dałem w znaczniki html (UWAGA! Pliki NIE mają rozszerzenia *.html tylko *.js)aby było widać te linie i można prosto określić gdzie co wkleić mam.

Proszę o jak najszybszą odpowiedź bo koniec roku już blisko.
Dziękuję i czekam na odpowiedź
damian302

kamil4u

9.12.2010, 18:31:13

w <head>:

Kod

W data.js zamień:

Kod

if (Ende-Anfang < 0) {
document.datum.DD.value=ENDE;
}

Kod

if (Ende-Anfang < 0) {
document.datum.DD.value=ENDE;
FIRE_Start();
}

, a w pliku fajerwerki.js usuń ostatnią linię: FIRE_Start();

damian302

10.12.2010, 14:46:25

Niestety nie działa

. Zrobiłem dokładne tak jak kazałeś i IE pokazuje mi błąd w wiersz: 11 znak:1 pliku 'fajerwerki.js'
Kod błędu:

Kod

Szczegóły błędu na stronie sieci Web

Agent użytkownika: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Sygnatura czasowa: Fri, 10 Dec 2010 13:44:14 UTC

Wiadomość: Wymagany jest obiekt
Wiersz: 11
Znak: 1
Kod: 0
Identyfikator URI: file:///D:/damian/strony/koniec%20roku/fajerwerki.js

kamil4u

10.12.2010, 20:51:45

Niestety nie mam IE(linux), więc nie mogę spr. samemu.
Działa pod innymi przeglądarkami? Która wersja IE?
Wklej jeszcze raz już poprawiony kod. Daj też plik index.html(tylko uproszczony - takie demo)
Spróbuj jeszcze zamienić w data.js, ostatnią linię na:

Kod

var ID;
onload = function(){ID=setInterval('countdown()',1);}

damian302

11.12.2010, 13:25:34

Niestety nic z tego. A nie ma jakiejś możliwości aby porównywał wartość z pola i jeżeli = zmiennej 'ENDE' to uruchamia się 'fajerwerki.js'. A może jest coś co wywołuje skrypt w skrypcie. Kończy się jeden i zaczyna drugi. Może jakoś je połączyć, a jeżeli to pomoże to mogę wrzucić wszystko do 'index.html' lub to jakoś przemianować na PHP czy coś.

Tutaj masz kod 'index.html'

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta name="author" content="G-nox">
		<meta name="generator" content="notatnik">
		<meta http-equiv="content-language" content="pl">
		<meta http-equiv="content-type" content="text/html"; charset="windows-1250">
		<title>KONIEC ROKU !!!</title>
		<script type="text/javascript" src="fajerwerki.js"></script>
		<script type="text/javascript" src="data.js"></script>
	</head>
	<body bgcolor="black">
		<center>
			<font size="6" color="white">
				<br><br><br><br><br><br><br><br><br><br><br><br><br>
				DO KOŃCA ROKU POZOSTAŁO:
			</font>
			<form name="datum"> 
				<input readonly="readonly" size="40" name="DD">
			</form>
			<font size="5" color="white">
				KAŻDY CHYBA WIE KIEDY TO NASTĄPI  
			</font>
		</center>
	</body>
</html>
[HTML] pobierz, plaintext

Tutaj 'data.js'

Kod

/* Tutaj podaj datę do której ma odliczać skrypt */
var Endjahr = 2010; // Rok (2007-...)
var Endmonat = 11; // miesi±c (1-12) o 1 mniej niz aktualny
var Endtag = 31; // dzień (1-31)
var Endstunde = 0; // godzina (0-23)
var Endminute = 0; // minuta (0-59)
var Endsekunde = 0; // sekunda (0-59)
var ENDE="Szczę¶liwego Nowego 2011 Roku!!!"; //Komunikat, kiedy odliczanie dobiegło końca (musi być w cudzysłowie)

var rechnen=0;
var Jahr=31536000000;
var Monat=Jahr/12;
var Tag=Jahr/365;
var Stunden=Tag/24;
var Minuten=Stunden/60;
var Sekunden=Minuten/60;
var Jahr1;
var Monat1;
var Tag1;
var Stunden1;
var Minuten1;
var Sekunden1;
var i;
var NIX=new Array();
var Anfang=new Date();
var Ende=new Date();

Ende.setYear(Endjahr)
Ende.setMonth(Endmonat)
Ende.setDate(Endtag)
Ende.setHours(Endstunde)
Ende.setMinutes(Endminute)
Ende.setSeconds(Endsekunde)

function countdown()
{
NIX[0]=0;
NIX[1]=0;
NIX[2]=0;

var Anfang=new Date();
Anfang.getYear();
Anfang.getMonth();
Anfang.getDate();
Anfang.getHours();
Anfang.getMinutes();
Anfang.getSeconds();
rechnen=Ende-Anfang;

if(!(rechnen<=0))
{
if(rechnen<32000)
{
i=parseInt(rechnen/1000);
i<10?NIX[3]='0':NIX[3]='';
document.datum.DD.value='00:00:'+NIX[3]+i;
} else {
Jahr1=parseInt(rechnen/Jahr);
rechnen=rechnen-Jahr1*Jahr;
Monat1=parseInt(rechnen/Monat);
rechnen=rechnen-Monat1*Monat;
Tag1=parseInt(rechnen/Tag);
rechnen=rechnen-Tag1*Tag;
Stunden1=parseInt(rechnen/Stunden);
rechnen=rechnen-Stunden1*Stunden;
Minuten1=parseInt(rechnen/Minuten);
rechnen=rechnen-Minuten1*Minuten;
Sekunden1=parseInt(rechnen/Sekunden);
Jahr1==0?Jahr1='':Jahr1='Rok: '+ Jahr1+'    ';
Monat1==0?Monat1='':Monat1='miesi±c: '+ Monat1+'    ';
Tag1==0?Tag1='':Tag1='dni: '+ Tag1+'    ';

Stunden1>9?NIX[0]='':NIX[0]=0;
Minuten1>9?NIX[1]='':NIX[1]=0;
Sekunden1>9?NIX[2]='':NIX[2]=0;

if (Ende-Anfang < 0) {
document.datum.DD.value=ENDE;
} else {
document.datum.DD.value = Jahr1 + '' + Monat1 + '' + Tag1 + 'godzin: ' + NIX[0] + '' + Stunden1 + ' minut: ' + NIX[1] + '' + Minuten1 + ' sekund: ' + NIX[2] + '' + Sekunden1;
}
}
} else {
clearInterval(ID);
document.datum.DD.value=ENDE;
}
}
var ID=setInterval('countdown()',1);

A tutaj 'fajerwerki.js'

Kod

Posiadam IE 8.0, sprawdziłem też na Firefox 3.6.10 i do samo.

kamil4u

12.12.2010, 15:18:24

Wszystko, działa tylko, nie dokładnie wykonałeś polecenia z mojego pierwszego postu.
http://kamil.contrel.pl/php.pl/fajerwerki/ <-- pobierz sobie wszystkie pliki(zmieniłem datę, żeby przetestować)

Teraz uwagi co do kodu HTML:
- Nie używaj notatnika - ściągnij normalny edytor z obsługą normalnych kodowań znaków( np. UTF-8)
- Zmień właśnie to kodowanie na UTF-8
- nie używaj znaczników: <center>,<font> zamiast tego poczytaj o CSS i elementach takich jak <div> i <span>
- skrypty, które są użyte nie są najlepsze,a nawet do doskonałości im wiele brakuje...
- Tak jak ja zrobiłem(<script> w <body>) jest nie zalecane, gdyby było to wszystko porządnie napisane umieściłbym je w <head>

Jeszcze wiele pracy przed Tobą, jeśli chcesz bardziej na poważnie zająć się robieniem stron

---------
Mój 900 post <hura>

damian302

12.12.2010, 15:53:39

Dzięki wielkie Kamil. Oczywiście plus leci.

Cytat

nie używaj znaczników: <center>,<font> zamiast tego poczytaj o CSS i elementach takich jak <div> i <span>

Te sprawy to znam ale chciałeś przecież prosty kod html, więc był. A skrypty nie były przeze mnie pisane, znalazłem je.

Jak możesz to tylko podaj co dokładnie i gdzie zmieniłeś.

Jeszcze raz dzięki. I gratuluje 900 postu

Wyjaśnione można zamknąć.

kamil4u

12.12.2010, 17:00:35

Cytat

Jak możesz to tylko podaj co dokładnie i gdzie zmieniłeś.

Zmiany względem kodu HTML i 2 plików JS, w Twoim pierwszym poście:
- <script> w <body> na końcu - generalnie chodzi o to, że kod 'fajerwerki' korzysta z DOM, więc strona musiałby być załadowana(zdarzenie onload), ale jestem zbyt leniwy - w razie czego sam sobie popraw
- z kodu fajerwerki usuwasz ostatnią linię: FIRE_Start();
- w kodzie data dodajesz(końcowa część):

Cytat

(....)

if (Ende-Anfang < 0) {
document.datum.DD.value=ENDE;
FIRE_Start();
} else {
document.datum.DD.value = Jahr1 + '' + Monat1 + '' + Tag1 + 'godzin: ' + NIX[0] + '' + Stunden1 + ' minut: ' + NIX[1] + '' + Minuten1 + ' sekund: ' + NIX[2] + '' + Sekunden1;
}
}
} else {
clearInterval(ID);
document.datum.DD.value=ENDE;
FIRE_Start();
}
}
var ID=setInterval('countdown()',1);

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.