JS, HTML - Problem z setTimeout() i grafiką

0

Witam,
Mam do wykonania projekt, który odlicza czas do końca roku i do podanej przez użytkownika daty i godziny. Napotkałem jednak na kilka problemów. Kod, który napisałem wygląda tak:

Plik HTML

 
<html>
<body>
<b> Jaki czas mam wyświetlić: </b>
<br>
<a id = "CzasDoPodanejDaty">Czas do podanej daty</a> 
<br>
<a id = "CzasDoKoncaRoku">Czas do zakończenia roku 2012</a> 
</body>
</html>
<script type="text/javascript" src="skrypt.js">
</script>

Plik JS

document.getElementById("CzasDoKoncaRoku").addEventListener("click",CzasDoKoncaRoku,true);
document.getElementById("CzasDoPodanejDaty").addEventListener("click",CzasDoPodanejDaty,true);

function LiczenieDniWMiesiacu(DzisiajMiesiac)
{
	DzisiajMiesiac++;
	switch (DzisiajMiesiac)
	{
		case 1: DniWMiesiacu = 31; break;
		case 2: DniWMiesiacu = 28; break;
		case 3: DniWMiesiacu = 31; break;
		case 4: DniWMiesiacu = 30; break;
		case 5: DniWMiesiacu = 31; break;
		case 6: DniWMiesiacu = 30; break;
		case 7: DniWMiesiacu = 31; break;
		case 8: DniWMiesiacu = 31; break;
		case 9: DniWMiesiacu = 30; break;
		case 10: DniWMiesiacu = 31; break;
		case 11: DniWMiesiacu = 30; break;
		case 12: DniWMiesiacu = 31; break;
	}
	return DniWMiesiacu;
}

function CzasDoPodanejDaty()
{
	Dzisiaj = new Date();
	DniWMiesiacu = LiczenieDniWMiesiacu(Dzisiaj.getMonth());
	
	Godzina = window.prompt("Podaj godzinę");
	Minuty = window.prompt("Podaj ile minut po godzinie "+Godzina+":00");
	Dzien = window.prompt("Podaj dzien");
	Miesiac = window.prompt("Podaj miesiac");
	Rok = window.prompt("Podaj rok");
	
	MiesiacDzisiaj = (parseInt(Dzisiaj.getMonth())+1)
	
	//document.write(Dzisiaj.getHours()+":"+Dzisiaj.getMinutes()+" "+Dzisiaj.getDate()+"."+MiesiacDzisiaj+"."+Dzisiaj.getFullYear()+"<br>");
	//document.write(Godzina+":"+Minuty+" "+Dzien+"."+Miesiac+"."+Rok+"<br>");
	
	if (Minuty <= Dzisiaj.getMinutes())
	{ 
		DoMinuty = 60 - Dzisiaj.getMinutes() + parseInt(Minuty);
		Godzina = Godzina - 1;
	}
	else DoMinuty = Minuty - Dzisiaj.getMinutes();
	
	if (Godzina <= Dzisiaj.getHours())
	{ 
		DoGodzina = 24 - Dzisiaj.getHours() + parseInt(Godzina);
		Dzien = Dzien - 1;
	}
	else DoGodzina = Godzina - Dzisiaj.getHours();
	
	if (Dzieni < Dzisiaj.getDate())
	{ 
		DoDzien = DniWMiesiacu - Dzisiaj.getDate() + parseInt(Dzien);
		Miesiac = Miesiac - 1; 
	}
	else DoDzien = Dzien - Dzisiaj.getDate();
	
	if (Miesiac < MiesiacDzisiaj)
	{ 
		DoMiesiac = 11 - MiesiacDzisiaj + parseInt(Miesiac);
	}
	else DoMiesiac = Miesiac - MiesiacDzisiaj;
	
	document.write("Godzin: "+DoGodzina+"<br>");
	document.write("Minut: "+DoMinuty+"<br>");
	document.write("Sekund: "+(60 - Dzisiaj.getSeconds())+"<br>");
	document.write("Dni: "+DoDzien+"<br>");
	document.write("Miesiecy: "+DoMiesiac+"<br>");
}


function CzasDoKoncaRoku()
{
	Dzisiaj = new Date();
	LiczenieDniWMiesiacu(Dzisiaj.getMonth());
	
	document.write("Do końca roku "+Dzisiaj.getFullYear()+" pozostało: <br>");
	document.write("Godzin: "+(23 - Dzisiaj.getHours())+"<br>");
	document.write("Minut: "+(60 - Dzisiaj.getMinutes())+"<br>");
	document.write("Sekund: "+(60 - Dzisiaj.getSeconds())+"<br>");
	document.write("Dni: "+(DniWMiesiacu - Dzisiaj.getDate()-1)+"<br>");
	document.write("Miesiecy: "+(11 - Dzisiaj.getMonth())+"<br>");

	setInterval('CzasDoKoncaRoku()',1000);
}

Mam problem z funkcją setTimeout (lub setInterval, kto co woli). Nie bardzo wiem gdzie mam to wpisać aby czas upływał. Na razie wyświetla mi jedynie czas jednak nie ten czas nie upływa. Gdzie powinienem dodać funkcję ?

Kolejny problem jest związany z grafiką. Mam dodać tło do skryptu *.js jednak nie wiem jak to zrobić. Zdjęcie wstawiam metodą document.write("..."), [nie wiem czy dobrze napisałem, bo piszę z pamięci, ale każdy chyba wie o co chodzi] jednak tła tak chyba nie wstawię.

Ostatni mój problem polega na wyświetlaniu liczb. Powinny one być grafiką, wiec tekst muszę zmienić na grafikę. Myślałem o zrobieniu czegoś takiego:

  1. zrobić 10 grafik od 1 do 0
  2. sprawdzać długość liczby (w c++, to by było dl = godzina.lenght())
  3. pętla, która jest wykonywana tyle razy ile jest znaków w zmiennej np. godzina
  4. sprawdzam 10 warunków if (lub case):
    if (a == 1) document.write("img src = ...");
    ...
    if (a == 0) document.write("img src = ...");

Czy moje rozwiązanie się sprawdzi czy lepiej użyć czegoś innego ?

Całość musi znajdować się w dwóch plikach HTML i JS.

Dziękują za wszystkie odpowiedzi.
Pozdrawiam,
GrafiS

0

zliczanie czasu na przykładzie funkcji czasDoKoncaRoku()
html:

<html>
<body>
<div id="kontener">
<b> Jaki czas mam wyświetlić: </b>
<br>
<a id = "CzasDoPodanejDaty">Czas do podanej daty</a> 
<br>
<a id = "CzasDoKoncaRoku">Czas do zakończenia roku 2012</a> 
</div>
</body>
</html>
<script type="text/javascript" src="js.js">
</script>

javascript:

function CzasDoKoncaRoku()
{		
        var mojdiv=document.getElementById("kontener");
		
        Dzisiaj = new Date();
        LiczenieDniWMiesiacu(Dzisiaj.getMonth());
	var tekst = "";	
        tekst += "Do końca roku "+Dzisiaj.getFullYear()+" pozostało: <br>";
        tekst += "Godzin: "+(23 - Dzisiaj.getHours())+"<br>";
        tekst += "Minut: "+(60 - Dzisiaj.getMinutes())+"<br>";
        tekst += "Sekund: "+(60 - Dzisiaj.getSeconds())+"<br>";
        tekst += "Dni: "+(DniWMiesiacu - Dzisiaj.getDate()-1)+"<br>";
        tekst += "Miesiecy: "+(11 - Dzisiaj.getMonth())+"<br>";
	mojdiv.innerHTML = tekst;
		
        setInterval('CzasDoKoncaRoku()',1000);
		
}
0

Witam.
Bardzo dziękuję za szybką i konkretną odpowiedź jednak napotkałem na kolejny mały problem. Nie wiem czy jest to spowodowane słabym sprzętem, czy źle napisanym kodem. Po upływie kilku "płynnych" sekund następuje lekkie zacięcie po czym mija 2 sekundy i przeglądarka się zawiesza. Mogę jedynie zakończyć zadanie.
Na filmie pokazałem jak wygląda mój problem.

PS. Ok, problem występuje tylko na Mozilla Firefox, na Google Chrome działa normalnie. Wydaje mi się, że jest to wina przeglądarki, z którą mam od dłuższego czasu problemy.

Został mi jeszcze tylko problem z grafiką.
Pozdrawiam,
GrafiS

1 użytkowników online, w tym zalogowanych: 0, gości: 1