Grafisk progressbar til dato

Det må du forklare lidt nærmere.

Normalt er en progressbar jo i %, men du vil have datoer på i stedet? Skal den så gå fra d. 1. til d. 31. eller hvad?

Skal måske lige nævne at det er 7 dage den skal tælle ned, så evt. have 7 "kasser" der bliver udfyldt en efter en.

hej igen hehe :)
Prøver at forklare..
Det er en klub der kører hver fredag. Så jeg vil lave en grafisk progressbar der viser hvor mange dage der er tilbage til festen (den starter så forfra lørdag).
Det kan vel i virkeligheden være 7 billeder, der bliver opdateret hver dag, kan det ikke?

Evt. suppleret med en tekst "kun 5 dage tilbage til festen" eller en countdown med dage og timer.

Det kan det sagtens være, f.eks. således:

<div id="progress"></div>

<script type="text/javascript">
var progress=document.getElementById("progress");
progress.appendChild(document.createElement("img"));
progress.firstChild.setAttribute("src",new Date().getDay()+".bmp");
progress=null;
</script>

så kalder du bare dine billeder 1.jpg (mandag), 2.jpg (tirsdag), 3.jpg (onsdag), osv. op til 7.jpg

Jeg kan ikke lige gennemskue scriptet, kan du forklare præcis hvad det gør?

<div id="progress"></div>

<script type="text/javascript">
var progress=document.getElementById("progress");
var d=new Date();
d=d.getDay();
progress.appendChild(document.createElement("img"));
progress.firstChild.setAttribute("src",new Date().getDay()+".bmp");
progress.appendChild(document.createElement("br"));
if(d==7)progress.appendChild(document.createTextNode("6 dage tilbage til festen!"));
else if(d==6)progress.appendChild(document.createTextNode("Festen er i dag!"));
else progress.appendChild(document.createTextNode("Kun "+(6-d)+" dage tilbage til festen!"));
progress=null;
</script>

Så laver jeg lige en enklere kode, der er lettere at forklare:

<div id="progress"><img><br></div>

<script type="text/javascript">
var progress=document.getElementById("progress");
var d=new Date();
d=d.getDay();
progress.getElementsByTagName("img")[0].setAttribute("src",d+".bmp");

if(d==7){
  progress.appendChild(document.createTextNode("6 dage tilbage til festen!"));
}else if(d==6){
  progress.appendChild(document.createTextNode("Festen er i dag!"));
}else{
  progress.appendChild(document.createTextNode("Kun "+(6-d)+" dage tilbage til festen!"));
}
</script>

Først finder vi div'en "progress", som vi vil have billedet vist inde i:
  var progress=document.getElementById("progress");

Så finder vi ugedagen for i dag - denne får vi i form af et tal, hvor mandag er 1 og søndag er 7:
  var d=new Date();
  d=d.getDay();

Så sætter vi billedets "src" til at være lig med d+".jpg", dvs. f.eks. "4.jpg", hvilket vil betyde torsdag:
  progress.getElementsByTagName("img")[0].setAttribute("src",d+".bmp");

Og så i if-sætningen bliver der indsat en tekst alt efter, hvor lang tid der er til lørdag.

Damn du god hehe..
Jeg har smækket scriptet ind der hvor det skal være, lavet 1.jpg - 7.jpg og lagt det op, men der er et par fejl; den siger der er to dage til festen (og det er fredag i morgen) og den viser ikke noget billede..

http://modelsofheaven.net/lyn/ff.asp

Ahh - ændrede .bmp til .jpg - mindre detalje :)
Men det er stadig den forkerte dag?

Den viser fint billede da. =)
Og der er da 2 dage til festen? I morgen og i overmorgen.

festen er fredag?

det da torsdag idag Mr2wear, så du skal vel blot sætte -1 fra date countdownen?

Ja det er torsdag? Så er der da også kun 1 dag til fredag??

Jeg har rettet den til -5.. To sidste ting: Hvordan styler jeg teksten?
Der skal vel stå 1 dag og ikke 1 dage, hvordan gør jeg det?

vent lige engang.. lørdag og søndag burde slet ikke være med jo..

lige meget.. lørdag og søndag er fint, skjuler dem jo bare på billederne.
Mangler bare førnævnte spørgsmål:
Hvordan styler jeg teksten?
Der skal vel stå 1 dag og ikke 1 dage, hvordan gør jeg det?

Så er der point til dig, og jeg er færdig :)

Du styler teksten på:

<div id="progress">

Så kan du enten i CSS'en skrive:

#progress{}

eller skrive:

<div style="font-weight:bold;bla:bla;" id="progress">

Og den nye kode:

<div id="progress"><img><br></div>

<script type="text/javascript">
var progress=document.getElementById("progress");
var d=new Date();
d=d.getDay();
progress.getElementsByTagName("img")[0].setAttribute("src",d+".bmp");

if(d==7){
  progress.appendChild(document.createTextNode("6 dage tilbage til festen!"));
}else if(d==6){
  progress.appendChild(document.createTextNode("Festen er i dag!"));
}else{
  progress.appendChild(document.createTextNode("Kun "+(6-d)+" dag"+(6-d==1?e)+" tilbage til festen!"));
}
</script>

:)

Den nye kode virker ikke ?

Hvad gør den ikke og hvilken fejl giver den?

Der manglede lige et kolon, ligesom der stod i fejlbeskrivelsen:

<div id="progress"><img><br></div>

<script type="text/javascript">
var progress=document.getElementById("progress");
var d=new Date();
d=d.getDay();
progress.getElementsByTagName("img")[0].setAttribute("src",d+".bmp");

if(d==7){
  progress.appendChild(document.createTextNode("6 dage tilbage til festen!"));
}else if(d==6){
  progress.appendChild(document.createTextNode("Festen er i dag!"));
}else{
  progress.appendChild(document.createTextNode("Kun "+(6-d)+" dag"+(6-d==1?"e":"")+" tilbage til festen!"));
}
</script>

Den siger festen er idag, selvom det var igår :)

Jaeh, du skal nok lige rette i linjen:

progress.appendChild(document.createTextNode("Kun "+(6-d)+" dag"+(6-d==1?"e":"")+" tilbage til festen!"));

som du gjorde tidligere. Satte du 6 til 5 eller hvad?
(Jeg havde troet, du havde sagt at festen var lørdag, derfor blev jeg lidt forvirret. =)

Jeg det var det jeg gjorde.. men nu siger den altså "Kun -1 dag tilbage til festen!" hehe

Hvad så med:

<div id="progress"><img><br></div>

<script type="text/javascript">
var progress=document.getElementById("progress");
var d=new Date();
d=d.getDay();
progress.getElementsByTagName("img")[0].setAttribute("src",d+".bmp");

if(d==7){
  progress.appendChild(document.createTextNode("5 dage tilbage til festen!"));
}else if(d==6){
  progress.appendChild(document.createTextNode("6 dage tilbage til festen!"));
}else if(d==5){
  progress.appendChild(document.createTextNode("Festen er i dag!"));
}else{
  progress.appendChild(document.createTextNode("Kun "+(5-d)+" dag"+(5-d==1?"e":"")+" tilbage til festen!"));
}
</script>

virker ikke?

virker, jeg manglede bare 0.jpg :)
Tror det var det!

endnu engang TUSIND tak.

Du må huske at sige, hvordan det ikke virker. Ellers kan jeg jo ikke debugge det. =)

Følgende virker:
-----------------------------------------
<html>
<head></head>
<body>

<div id="progress"><img><br></div>

<script type="text/javascript">
var progress=document.getElementById("progress");
var d=new Date().getDay();
progress.getElementsByTagName("img")[0].setAttribute("src",d+".bmp");

if(d==0){
  progress.appendChild(document.createTextNode("5 dage tilbage til festen!"));
}else if(d==6){
  progress.appendChild(document.createTextNode("6 dage tilbage til festen!"));
}else if(d==5){
  progress.appendChild(document.createTextNode("Festen er i dag!"));
}else{
  progress.appendChild(document.createTextNode("Kun "+(5-d)+" dag"+(5-d==1?"e":"")+" tilbage til festen!"));
}
</script>

</body>
</html>
----------------------------------------------
Bemærk dog, at søndag ikke er "7", som jeg først påstod, men derimod 0.

Det virker, dog men den eneste fejl er at den nu siger "5 >dag< til blabla"

Ja, ret lige:
(5-d==1?"e":"")
til:
(5-d!=1?"e":"")

Perfeekt.. Tak for hjælpen champ!

Så lidt. =)