Javascript Countdown med progress bar

[Sinopa]

Okej. Jag behöver verkligen hjälp av ett javascript geni här

 

Vi håller på att göra en BF2 Clan website och vi behöver ett script som räknar ned till nästa Official Battle.

 

 

Jag har stort behov av ett javascript som skall räkna ned till ett specifikt datum.

Man skall kunna sätta ett startdatum och ett datum den räknar ned till. Altså hur lång tid det är kvar.

Altså live countdown. Men inte bara det. Under datum texten som den räknar ned, så skall skall en progress bar visa hur långt det är kvar till det datum.

 

Progress baren skall vara 160px lång och 15px hög. Ramen som skall vara 1px bred, skall färgen vara i #A2A2A2. Bakgrunds fargen skall vara #000000 och själva baren skall vara #FFFFFF

 

Är det någon där ute som vet vart jag kan hitta ett sådant countdown script eller som enkelt kan göra ett sådant script?

 

 

 

~ Vexiphne

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Tui animi compote es, ne quid fraudis stuprique ferocia pariat.

 

[bild bifogad 2006-07-31 23:19:02 av Vexiphne]

[Anjuna Moon]

Skall räknaren ovanför förloppsindikatorn räkna ned enbart dagar, eller skall det vara som ett stoppur som räknar bakåt sekund för sekund?

 

Vad gäller förloppsindikatorn, hur hade du tänkt dig att den skall räkna? Givet ett fast startdatum eller? Annars förstår jag inte riktigt vad som är tänkt att definiera intervallet fram till slutdatumet.

[inlägget ändrat 2006-08-01 14:59:36 av Anjuna Moon]

[Anjuna Moon]

Här är ett enkelt exempel som bara visar antal dagar kvar, samt en progressbar med ett fast start- och slutdatum som visar förlöpt tid sedan startdatumet.

 

Demo:

http://c2.nordicplaza.com/eforum/countdown.asp

 

Källkod:

http://4f3108d41254291f.paste.se/

 

[Sinopa]

Oh. Wow! Just som jag hade förestäld mig. Men kunde du göra det som du skrev. Altså som ett stopur. Att den visar det inte i dagar, men "timmar:minuter:sekunder"? I detta format "123:45:59"

 

Tack så otroligt mycket för att du hjälper mig Anjuna Moon :-)

 

 

~ Vexiphne

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Tui animi compote es, ne quid fraudis stuprique ferocia pariat.

 

 

[inlägget ändrat 2006-08-01 18:36:24 av Vexiphne]

[Anjuna Moon]

Ska se vad jag kan göra, återkommer om en stund.

 

[Sinopa]

Hej Anjuna Moon.

Om du ser på http://www.zonkworld.com så är det ett exempel där på vad jag menar

 

 

~ Vexiphne

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Tui animi compote es, ne quid fraudis stuprique ferocia pariat.

 

 

[Anjuna Moon]

Här kommer en variant enligt ditt önskemål. Har inte tillgång till att lägga upp det på min webbserver just nu så jag postar bara källkoden.

 

http://de7f1b91e253b06b.paste.se/

 

EDIT: Denna variant justerar dock inte progressbar:en "live", utan den förändras stegvis beroende på vilken dag det är, men kräver omladdning om man låtit webbläsaren stå på.

[inlägget ändrat 2006-08-01 18:50:36 av Anjuna Moon]

[Anjuna Moon]

Förresten, testa den här länken (behöver ändå veta om min brandvägg är korrekt figgad så andra kan komma åt min webbserver hemma)

 

http://81.26.253.111/eforum/countdown.asp

 

[Sinopa]

Men detta är ju helt perfekt. Progressbaren behöver inte vara ”live” bara klockan är det

Bara en liten fråga. Variablerna för start och endtime. Hur funderar dom? Alltså

 

Start (2006,6,15,12,0,0) är det år, månad, dag, timmar, minuter, sekunder från för exempel dagens datum?

 

Och då

 

End (2006,6,15,12,0,0) det samma?

 

Just checking

 

 

~ Vexiphne

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Tui animi compote es, ne quid fraudis stuprique ferocia pariat.

 

 

[Sinopa]

Branväggen fungerar. Jag kommer in på din webbserver i allfall

 

 

~ Vexiphne

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Tui animi compote es, ne quid fraudis stuprique ferocia pariat.

 

 

[Anjuna Moon]

Bara en liten fråga. Variablerna för start och endtime. Hur funderar dom?

De fungerar precis som du själv skrev. Kom dock ihåg att just månad måste anges med sitt värde minus 1. Exempelvis skall alltså augusti anges som 7 istället för 8.

 

Alltså: 2006,6,15,12,0,0 betyder 15:e juli 2006 kl. 12.00.00

 

Starttiden används enbart för progressbaren

Sluttiden är ert event-datum. Dagens datum tar scriptet reda på själv.

 

EDIT: Skrev fel, 15:e juli skall det vara och inget annat.

[inlägget ändrat 2006-08-01 19:20:44 av Anjuna Moon]

[Sinopa]

Verkligen helt perfekt. Tack så mycket för hjälpen Anjuna Moon och när clan siten är uppe, så skall jag skriva att det är du som har gjord scriptet. Om det går bra då? :-)

 

 

~ Vexiphne

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Tui animi compote es, ne quid fraudis stuprique ferocia pariat.

 

 

[Anjuna Moon]

så skall jag skriva att det är du som har gjord scriptet. Om det går bra då?

Hehe, det behövs inte men det går så bra så, bara du inte lägger ut min e-postadress också =)

 

Lycka till med resten av webbplatsen

 

[polarbearandy]

Jag har försökt följa med i ert snack här men ville veta om du - Anjuna Moon - kan hjälpa mig med en liknande grej. Ville ha en countdown räknare på min sajt inför lanseringen av vårt företag. Helt enkelt en siffra som i realtid räknar ner, och där jag själv kan ange typografi och sånt via css.

 

Tanken är att det helt enkelt ska stå på första sidan:

 

Tid kvar till lansering: xx veckor, xx dagar, xx timmar, xx minuter

 

Går det att lösa? Jag försökte använda ditt script som du angav men jag fick inte ihop det riktigt. Jag är inte så bra på den här typen av programmering så jag gjorde säkert fel.

 

Vore tacksam för svar i frågan.

 

 

/ Anders

 

 

[Jonas__B]

efter en googling på "javascript countdown timer" kunde man bl a hitta detta resultat.

http://www.hashemian.com/tools/javascript-countdown.htm

 

[polarbearandy]

Juste, tack för hjälpen Jonas_Bo. Jag har försökt googla men kanske inte riktigt vetat vad jag ska let< efter. Hittade bara en massa mer eller mindre krångliga lösningar som inte alls ville det jag ville.

 

Nu ska vi testa!

 

[Denocle]

Jag skulle väldigt gärna vilja få scriptet att visa dagar:timmar:minuter:sekunder.

 

Går det att fixa?

[Anjuna Moon]

Menar du scriptet som jonas_b länkat till? Isåfall ändrar du bara raden

DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";

till

DisplayFormat = "%%D%%:%%H%%:%%M%%:%%S%%";

[Denocle]

Menar du scriptet som jonas_b länkat till? Isåfall ändrar du bara raden

DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";

till

DisplayFormat = "%%D%%:%%H%%:%%M%%:%%S%%";

 

Nej jag menar det första scriptet.

[Denocle]

Jag menar att jag skulle vilja ha en nedräknare med progressbar (som i det första scriptet) men att det inte högst visade timmar utan också dagar framför det.

[Denocle]

Jag löste problemet så här.

 

Jag bytte den här

function Tick() {
       Secs--;
       hh=Math.floor(Secs/3600);
       mm=Math.floor((Secs-(hh*3600))/60);
       ss=Secs % 60;
       oHd.innerHTML=hh+':'+Pad(mm)+':'+Pad(ss);
}

 

 

Mot det här:

 

function Tick() {
       Secs--;
dd=Math.floor(Secs/86400);
       hh=Math.floor((Secs-(dd*86400))/3600);
       mm=Math.floor((Secs-(hh*3600))/60+20);
       ss=Secs % 60;
oHd.innerHTML=dd+'.'+Pad(hh)+'.'+Pad(mm)+'.'+Pad(ss);
}

 

Det finns säkert ett mycket bättre sätt att lösa det, men jag är nybörjare på javascript och dålig på matematik.