hoe elementen in div's uit javascript?

[pepernoot]

ik heb dit script,

nu wil ik de elementen,

%%D%%, %%H%%, %%M%%, %%S%% Als div's op een html pagina hebben,
maar hoe?

[JS]/*
Author: Robert Hashemian
http://www.hashemian.com/

function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return "<b>" + s + "</b>";
}

function CountBack(secs) {
if (secs < 0) {
document.getElementById("cntdwn").innerHTML = FinishMessage;
return;
}
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

document.getElementById("cntdwn").innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}

function putspan(backcolor, forecolor) {
document.write("<span id='cntdwn' style='background-color:" + backcolor +
"; color:" + forecolor + "'></span>");
}

if (typeof(BackColor)=="undefined")
BackColor = "white";
if (typeof(ForeColor)=="undefined")
ForeColor= "black";
if (typeof(TargetDate)=="undefined")
TargetDate = "12/31/2011 0:00 AM";
if (typeof(DisplayFormat)=="undefined")
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
CountActive = true;
if (typeof(FinishMessage)=="undefined")
FinishMessage = "";
if (typeof(CountStepper)!="number")
CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
LeadingZero = true;


CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
ddiff = new Date(dnow-dthen);
else
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);[/JS]

 

[That Guy]

Wacht, wat?


Het is compleet onduidelijk wat je precies wilt. Wil je in verschillende div's de uren, dagen, minuten, etc. van een countdown hebben? Daarnaast, leuk dat je even een script hebt neergezet, maar als je het toch anders wilt, kan je beter een ander script zoeken of er zelf een schrijven.

 

[pepernoot]

Ik wil idd de uren, dagen, minuten, etc. los van elkaar in een andere html zetten.

"zoeken of er zelf een schrijven", makkelijker gezegd dan gedaan!

 

[That Guy]

Het probleem is een beetje dat het script 'niet klopt'; er missen allemaal variabelen (?!) en het zou handig geweest zijn als je ook had verteld wat het nou precies doet. Want dat moeten we er nu zelf uit op zien te maken (niet dat dat een probleem is, maar 't weer wat meer werk voor ons, en met een vaag bericht haken er mensen eerder af)

Klopt het als ik zeg dat je dus dit wilt hebben: een script dat in 4 verschillende div's de dagen, uren, minuten en seconden neerzet, waarbij je zelf de hoeveelheid seconden countdown aangeeft?

 

[pepernoot]

"Klopt het als ik zeg dat je dus dit wilt hebben: een script dat in 4 verschillende div's de dagen, uren, minuten en seconden neerzet, waarbij je zelf de hoeveelheid seconden countdown aangeeft?"

4 verschillende div's met de dagen, uren, minuten en seconden,
maar er moet een einddatum zijn waar hij naar aftelt!

Ik heb al een paar Scripts gevonden die het allemaal perfect doen, maar ik krijg de min, sec, enz niet los van elkaar! (in div's)

Als je een ander script hebt die dat wel kan dan is dat ook prima!

 

[pepernoot]

http://www.ricocheting.com/code/javascript/html-generator/countdown-timer

Hier hebben ze zelfs al een oplossing! onder "Making different classes for each element", maar ik snap niet hoe dat precies zit!

 

[That Guy]

Bah, allemaal veelste moeilijk voor zo iets simpels als een countdown.

Zie hier, een normaal countdown script:

<div id='dagen'></div>
<div id='uren'></div>
<div id='minuten'></div>
<div id='seconden'></div>

[js]
// That Guy's superawesome countdown script ding.
// alles in de var, whoooo!


var tijdspul =
[
[document.getElementById('dagen'), 86400, Infinity],
[document.getElementById('uren'), 3600, 24],
[document.getElementById('minuten'), 60, 60],
[document.getElementById('seconden'), 1, 60]
],
secondes = Math.floor((new Date(2011, 11, 5).getTime() - new Date().getTime()) / 1000),
timer = setInterval(function()
{
var i;

for(i = 0; i < 4; i++)
{
tijdspul[0].innerHTML = Math.floor(secondes / tijdspul[1]) % tijdspul[2];
}

secondes--;

if(secondes < 0)
{
clearInterval(timer);
}
}, 1000);[/js]


Bij het stukje secondes = staan nu de getallen 2011, 11, 5. Dit staat voor jaar 2011, maand 11 (begint bij 0, 0 is januari, dus 11 is december) en 5 voor dag 5. Ofwel: de timer telt af tot 5 december! Het kan nog specifieker: je kan de datum verder specificeren; het formaat is jaar, maand, dag, uur, seconde, miliseconde.



:thumb:

 

[pepernoot]

Wow tnx ik ga er naar kijken!!!!

 

[pepernoot]

Werkt goed en makkelijk tnx!!

Nog twee vragen;
- Is het mogelijk om "00" weer te geven als bijv. het aantal dagen "0" is,
en kan dit dan ook met seconden, dus; 11...10...09...08 ipv 11...10...9...8.

-Is het mogelijk om het javascript in een apart document te stoppen een "tijdspul.js".
dus dat ik link naar dat script?

 

[pepernoot]

-Is het mogelijk om het javascript in een apart document te stoppen een "tijdspul.js".
dus dat ik link naar dat script?

Solved!

 

[pepernoot]

hij geeft negatieve getallen als de datum verlopen is!

 

[That Guy]

Ja, natuurlijk. Het is toch een countdown? Als het goed is geeft 'ie 0/0/0/0 weer als het aantal secondes kleiner is dan 0; zie regel 24.



Als je een bepaald formaat wilt moet je dat in de if-loop doen, wat is precies het idee? Alle getallen onder de 10 moeten er een '0' voor krijgen?

 

[pepernoot]

Ja, natuurlijk. Het is toch een countdown? Als het goed is geeft 'ie 0/0/0/0 weer als het aantal secondes kleiner is dan 0; zie regel 24.

Als je een bepaald formaat wilt moet je dat in de if-loop doen, wat is precies het idee? Alle getallen onder de 10 moeten er een '0' voor krijgen?

Hij telt idd af to 0,0,0,0. maar als je de pagina refreshed dan geeft hij negatieve getallen.

-Alle getallen onder de 10 moeten er een '0' voor krijgen?; ja dat is wat ik bedoel!

 

[That Guy]

[js]var tijdspul =
[
[document.getElementById('dagen'), 86400, Infinity],
[document.getElementById('uren'), 3600, 24],
[document.getElementById('minuten'), 60, 60],
[document.getElementById('seconden'), 1, 60]
],
secondes = Math.floor((new Date(2011, 11, 5).getTime() - new Date().getTime()) / 1000),
timer = setInterval(function()
{
var i, getal;

if(secondes > 0)
{
for(i = 0; i < 4; i++)
{
getal = Math.floor(secondes / tijdspul[1]) % tijdspul[2];
tijdspul[0].innerHTML = getal.toString().length < 2 ? '0' + getal.toString() : getal;
}

secondes--;
}else{
for(i = 0; i < 4; i++)
{
tijdspul[0].innerHTML = '00';
}
clearInterval(timer);
}
}, 1000);[/js]

 

[pepernoot]

Nogmaals bedankt!! nu werk hij helemaal naar behoren!