18 svar · 618 visningar · startad av nanne
Jag har gjort ett tufft php script som skapar en gifbild på en analog klocka med aktuell tid. Men jag skulle vilja ha ett javascript som laddar om sidan varje sekun/minut så att man ser att klockan rör på sig utan att man måste ladda om hela sidan. Mina kunskaper i javascript är ju inte så stora så :/
Du frågar efter ett skript som laddar om sidan, men som inte laddar om hela sidan?
Följande uppdaterar sidan en gång i sekunden (1000 millisekunder):
<script defer>
window.onload = ticktack;
function ticktack()
{
setTimeout("history.go(0);",1000);
}
</script>
Rätt irriterande liten funktion faktiskt... men men 
Jag tror nanne ville ha ett script som laddade om enbart bilden. Själv kan jag inte säga om det går eller hur man gör det i så fall, men någon annan kanske vet..?
Herregud!
Fasen vad onödigt att göra ett php script som skapar bilden.
Gör så istället att du har bilder för 0-9 och laddar om bilden varje sekund.
Se bara till att du preloadar bilderna innan du sätter igång klockan. Annars så kommer det att se fult ut. Alternativt så kan du ha olika lager som bilderna ligger i. Jag vet inte vilket som tar minst kraft. Det är väl bara att testa, antar jag. Men att byta bildena (document.images['img1'].src='blablabla.gif' typ)är ju helt klart lättast.
/Magnus
Herregud!
Fasen vad onödigt att göra ett php script som skapar bilden.
Inte om man enkelt vill kunna modifiera bilden. Med att lägga in olika parametrar så kan jag enkelt styra färgen på minut, tim, sekundvisare, bakgrundsvärg etc. etc.
Då beror det ju på hur ditt php-script ser ut. Alltså med vilket filnamn som bilden genereras. Nu har inte jag hållit på med php någonting, men om skriptet skapar en ny bild säg varje sekund, så kan man med javascript läsa in en ny bild varje sekund... fast hur det blir med synkroniseringen mellan scripten vet jag inte. Det går ju att använda samma kod som jag skrev ovan - det är bara att byta ut history.go(0) till en funktion, t.ex. switchImage()...
<script defer>
window.onload = switchImage;
function switchImage()
{
oClock.src = "./klocka.gif"; // namnet på den genererade bilden
tClock = setTimeout("switchImage()", 1000);
}
</script>
<img src=... id=oClock>
Men detta förutsätter att det tar mindre än 1 sekund att generera och läsa in bilden... det här är nog ingen bra lösning, men kanske en bit på vägen
Hmmm... är det inte bättre att använda setInterval() än setTimeout()?. Det senare fryser ju som en fördröjning, men det första låter koden knalla på som vanligt, men "nöter" sin uppdatering (kallar på funktionen) var 1000:e millisekund, tills den blir nollad med clearInterval()... om den nu blir det. Typ:
<script defer>
window.onload = switchImage;
function switchImage()
{
oClock.src = "./klocka.gif"; // namnet på den genererade bilden
}
setInterval("switchImage()", 1000);
</script>
<img src=... id=oClock>
eller nåt
Humm... Bil´den kommer ju inte att ha laddas klart när den uppdateras igen! :/
Öka antalet millisekunder?
<script>
function switchImage()
{
oClock.src = "./klocka.gif"; // namnet på den genererade bilden
}
</script>
<body onLoad="setInterval("switchImage()", 10000);">
<img src=... id=oClock>
Scriptet funkar bra. tack till er! 
Fast nu sitter jag ju på min fasta lina då. Så jag får hoppas att det funkar på modem oxå. Kan nån testa? Förmodligen så måste jag optimera klockan en del för bilden blir lite väl stor.
http://dev1.eldata.se/hemsida/testsida.php3
Det ser fint ut, men klockan går en timme fel.
Sekundvisaren syns inte, men det är väl meningen? (Den syns om jag laddar enbart klocka.php).
Fint jobbat!
Det är serverns klocka som är fel så det är inget jag kan göra åt.
Hmmm... Upptäckte själv nu att den inte fungerar i Netscape. Men i explorer funkar den ju bra :-/
Det brukar ju vara så... någon av webläsarna strular.
Mjo.. dom gör ju alltid det.
Nåja.. jag har ställt in att om man använder explorer så syns sekundvisaren men om man använder netscape så syns den inte.
Är det inte så att id bara stöds av IE och Mozilla?
Sekundvisaren syns, men rör sig inte i Mac + IE (du ser själv vilken version här nedan).
Blev scriptfel i msdebuggern.
Lägg till "var oclock=new Image();" innan "function switchImage()" i koden.
<script>
var oclock=new Image();
function switchImage()
{
oClock.src = "./klocka.gif"; // namnet på den genererade bilden
}
</script>
<body onLoad="setInterval("switchImage()", 10000);">
<img src=... id=oClock>
Nu får jag upp detta i konsolen
syntax error.
setInterval(
...........^
trodde först att det berodde på att du lagt " runt switchImage() men då klagade den på det. Hmm....
nya koden
<script type="text/javascript" language="JavaScript">
function switchImage() {
var oClock=new Image();
oClock.src = "./clock.php?size=100&style=0&style=1&tcolor=FF0000&mcolor=00FF00&showsecond=1"; // namnet på den genererade bilden
}
</script>
<BODY bgcolor="White" onLoad="setInterval("switchImage()", 10000);">
"switchImage()" fungerar nog bättre med 'switchImage()'... annars tar situationstecknen ut varandra.
Nu tokladdar ju bilden på sidan (url här ovan)... kanske skulle strunta i sekundvisaren och ladda var 30:e sekund istället?