Naar datum aftellen

vinkje21 · 23 mar 2010, 22:03

Hoi,
Kan iemand mij vertellen hoe ik een "Naar datum aftellen" op mijn website kan plaatsen ? b.v. Nog x dagen en x uren naar een vooropgestelde datum.
ongeveer eentje zoals we op de zijkant van de blogs op seniorennet kunnen plaatsen
Grtjs
willy

coderunner · 23 mar 2010, 22:40

Beste Wim,

Een "count down" doe je met vb. een javascript. Zoek in je favoriete browser naar "countdown script" en je krijgt verschillende kant-en-klare javascripts waaruit je kan kiezen.

mvg,
Coderunner

coderunner · 24 mar 2010, 19:49

Een simpel uitgewerkt voorbeeld ...

Plaats onderstaand javascript op de plaats waar je de count down wil hebben

Code: Selecteer alles

<script type="text/javascript">
var today=new Date()

//Invullen van de  datum van het evenement. MAAND (1-12) en DAGEN (1-31) - staat nu op 4 , 1 = 1 april
var theoccasion=new Date(today.getFullYear(), 4, 1)

//Hier kan je aanpassingen aanbregen:
var beforeOccasionText="tot 1 april"
var onOccasiontext="Vandaag is het zover!"

var monthtext=new Array("Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December")
theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format
var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")" //toon datum van het evenement

var one_day=1000*60*60*24
var calculatediff=""

calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day))
if (calculatediff<0){ //if bday already passed
var nextyeartoday=new Date()
nextyeartoday.setFullYear(today.getFullYear()+1)
calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff)
}

//Display message accordingly
var pluraldayornot=(calculatediff==1)? "dag" : "dagen"
if (calculatediff>0)
	document.write("<b>Nog "+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+"</b>")
else if (calculatediff==0)
	document.write("<b>Nog "+onOccasiontext+"</b>")
</script>

Kijk in de code waar je aanpassingen moet doen (datum van het evenement wijzigen)

Klik hier om het javascript in werking te zien. Dit staat ingesteld dat het aftelt naar 1 april.

Heb je vragen i.v.m. bovenstaand javascript en/of een ander gevonden javascript, dan hoor ik het wel

mvg,
Coderunner

vinkje21 · 25 mar 2010, 13:57

Dag coderunner,

Bedankt voor de informatie, de code staat ondertussen reeds op mijn website en werkt goed denk ik.
http://www.everyoneweb.com/VRIENDENVINKENIERS
Ik blijf ondertussen nog verder zoeken, ik had er graag eentje gevonden zoals op mijn Blog bij seniorennet (VRIENDENVINKENIERS) in de zijkolom, met " Nog X dagen, X uur, X min. tot . . .
Maar tot zolang heb ik toch al iets hé
Nogmaals bedankt voor de code, en vriendelijke groetjes

Willy

ultddave · 25 mar 2010, 15:54

HTML + JavaScript code:

Code: Selecteer alles

<html>
<head>
	<title> Pagina </title>
	<script type="text/javascript">
		function startTime()
		{
			var datum = new Date(2010, 03, 01, 12, 00, 00, 00);

			var huidigedatum = new Date();

			var verschil = new Date(datum.getTime() - huidigedatum.getTime());


			tijdsverschil = verschil.getTime();

			var week = Math.floor(tijdsverschil / (1000 * 60 * 60 * 24 * 7));
			tijdsverschil -= week * (1000 * 60 * 60 * 24 * 7);

			var dag = Math.floor(tijdsverschil / (1000 * 60 * 60 * 24)); 
			tijdsverschil -= dag * (1000 * 60 * 60 * 24);

			var uur = Math.floor(tijdsverschil / (1000 * 60 * 60));
			tijdsverschil -= uur * (1000 * 60 * 60);

			var minuut = Math.floor(tijdsverschil / (1000 * 60)); 
			tijdsverschil -= minuut * (1000 * 60);

			var seconde = Math.floor(tijdsverschil / 1000); 
			tijdsverschil -= seconde * 1000;

			document.getElementById('klok').innerHTML = "Nog " + week + " weken " + dag + " dagen " + uur + " uren " + minuut + " minuten " + 

seconde + " seconden tot " + datum.toLocaleDateString() + " " + datum.toLocaleTimeString();
			t=setTimeout('startTime()',500);
		}

	</script> 
</head>
<body onload="startTime()">
	<div id="klok"></div>
</body>
</html>

Voor deze code moet je wel 2 dingen plaatsen in je HTML code.
Ten eerste moet je body tag, het "onload" attribuut voorzien, waardoor de klok gestart wordt.

Code: Selecteer alles

<body onload="startTime()">
	<div id="klok"></div>
</body>

Ten tweedde moet je ergens in je code, waar je de klok wilt plaatsen. Een <div> tag openen met een id dat gelijk is aan "klok". Het mag ook een <p> tag zijn.

Bijvoorbeeld:

<p id="klok"></p>

De inhoud tussen de <p> en </p> of <div> en </div> moet leeg zijn. Die wordt door het script ingevuld met de klok.

De tijd instellen doe je in deze regel:

Code: Selecteer alles

var datum = new Date(2010, 03, 01, 12, 00, 00, 00);

Deze getallen: 2010, 03, 01, 12, 00, 00, 00
Stellen dit voor: jaar, maand, dag, uur, minuut, seconde, milliseconde

In dit geval:

2010 = jaar
03 = maand (LET OP: Het maandsysteem gaat van 0-11. En niet van 1 - 12.
Januari = 0
Februari = 1
Maart = 2
April = 3
...
December = 11

Enkel het maandsysteem begint vanaf 0 te tellen. De dagen niet.

Dit: 2015, 10, 27, 12, 30, 00, 00
Is dus: 27 November 2015 om 12u30.

Werkend voorbeeld:
http://www.latemar.be/admin/temp/counter.html

Mvg,
Dave

ultddave · 25 mar 2010, 15:58

28 maart gaan we naar zomeruur zeker?

Ik weet niet of die scripts daar rekening mee houden. Normaal gezien gaat het script dus om 28 maart 02u00 's morgens, 1 uur aftrekken bij het aftellen.

Die 1 uur, zit er nu nog niet in verwerkt denk ik.

EDIT: Hij zit er volgens mij toch in verwerkt. Zomeruur wordt meegeteld.

Mvg,
Dave

coderunner · 25 mar 2010, 19:00

Beste Wim,

Aftellen javascript met X dagen X uren X minuten X seconden aangepast voor jouw website.

Nog wel de juiste datum invullen (zie step1)
staat nu op 1 april 2010 17.00u

Code: Selecteer alles

setcountdown(2010,4,1,17,00,00);

In step2 en step 3 kan je meer aanpassingen aanbrengen (zie aldaar)

Plaats onderstaand javascript op de plaats waar je de count down wil hebben

Code: Selecteer alles

<script type="text/javascript">

function setcountdown(theyear,themonth,theday,thehour,themin,thesec)
{
	yr=theyear;mo=themonth;da=theday;hr=thehour;min=themin;sec=thesec;
}

//////////Bewerk  het aftelscript hier//////////////////

//STEP 1: verander hier het aftel - script, in het formaat  jaar, maand, dag, uur(0=middernacht,23=11pm), minuten, seconden:
setcountdown(2010,4,1,17,00,00);

//STEP 2: verander hieronder de tekst die na het aftellen moet komen, en de boodschap op de dag van het tijdstip, respectively
var occasion="<div style=font-size:20px;>Zettingen beginnen over</div><br />";
var message_on_occasion="Zettingen zijn reeds voorbij";

//STEP 3: verander de 5 variabelen hieronder , te weten  de width (= breedte), height (= hoogte), background color (= achtergrondkleur), en tekst style van de countdown area
var countdownwidth='400px';
var countdownheight='35px';
var countdownbgcolor='yellow';
var opentags='<div style="font-family:Verdana; font-size:16px; color:black; text-align:center">';
var closetags='</div>';

//////////verander hieronder niets//////////////////

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
var crosscount='';

function start_countdown()
{
	if (document.layers)
		document.countdownnsmain.visibility="show";
	else
		if (document.all||document.getElementById)
			crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie;
			countdown();
}

if (document.all||document.getElementById)
	document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>');

window.onload=start_countdown;


function countdown()
{
	var today=new Date();
	var todayy=today.getYear();
	if (todayy < 1000)
		todayy+=1900;
	var todaym=today.getMonth();
	var todayd=today.getDate();
	var todayh=today.getHours();
	var todaymin=today.getMinutes();
	var todaysec=today.getSeconds();
	var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
	futurestring=montharray[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec;
	dd=Date.parse(futurestring)-Date.parse(todaystring);
	dday=Math.floor(dd/(60*60*1000*24)*1);
	dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
	dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
	dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
		//if on day of occasion
	if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da)
	{
		if (document.layers)
		{
			document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags);
			document.countdownnsmain.document.countdownnssub.document.close();
		}
		else
			if (document.all||document.getElementById)
				crosscount.innerHTML=opentags+message_on_occasion+closetags;
		return;
	}
		//if passed day of occasion
	else
		if(dday<=-1)
		{
			if (document.layers)
			{
				document.countdownnsmain.document.countdownnssub.document.write(opentags+"Zettingen zijn reeds voorbij! "+closetags);
				document.countdownnsmain.document.countdownnssub.document.close();
			}
			else if (document.all||document.getElementById)
				crosscount.innerHTML=opentags+"Zettingen zijn reeds voorbij! "+closetags;
			return;
		}
			//else, if not yet
		else
		{
			if(document.layers)
			{
				document.countdownnsmain.document.countdownnssub.document.write(opentags+occasion+dday+ " dagen, "+dhours+" uren, "+dmin+" minuten, en "+dsec+" seconden tot "+closetags);
				document.countdownnsmain.document.countdownnssub.document.close();
			}
			else if (document.all||document.getElementById)
				crosscount.innerHTML=opentags+occasion+dday+ " dagen, "+dhour+" uren, "+dmin+" minuten, "+dsec+" seconden "+closetags;
		}
		setTimeout("countdown()",1000);
}
</script>

Klik hier om het javascript in werking te zien. Dit staat ingesteld dat het aftelt naar 1 april 2010 17.00.00u.

Nu staat er: Afbeelding

(telt wel af natuurlijk)

Heb je het toch liever in de vorm van "Nog X dagen, X uur, X min. tot . . . " dan laat je het me maar weten.
Heb je nog andere vragen i.v.m. bovenstaand javascript (juiste settings, e.d.) dan hoor ik het wel

mvg,
Coderunner

ultddave · 26 mar 2010, 19:28

Dit deel lijkt me wel nogal overbodig:

Code: Selecteer alles

var today=new Date(); 
   var todayy=today.getYear(); 
   if (todayy < 1000) 
      todayy+=1900; 
   var todaym=today.getMonth(); 
   var todayd=today.getDate(); 
   var todayh=today.getHours(); 
   var todaymin=today.getMinutes(); 
   var todaysec=today.getSeconds(); 
   var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec; 
   futurestring=montharray[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec; 
   dd=Date.parse(futurestring)-Date.parse(todaystring);

De huidige datum wordt opgevraagd via new Date(). Dan wordt de datum opgesplitst in allemaal apparte variabele. En in de laatste regel, wordt hij terug ineen gezet.

Dit is de verkorte versie (in 3 regels):

Code: Selecteer alles

var today = new Date(); 

futurestring.setMonth(futurestring.getMonth-1); 

dd = futurestring.getTime() - today.getTime();

Alleen in de "if test" erna:
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da)

Moet die 'todayd' nog vervangen worden door today.getDate()

Dus:

Code: Selecteer alles

...
...
function countdown() 
{ 
var today = new Date(); 
futurestring.setMonth(futurestring.getMonth-1); 
dd = futurestring.getTime() - today.getTime();

   dday = Math.floor(dd/(60*60*1000*24)*1); 
   dhour = Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1); 
   dmin = Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1); 
   dsec = Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1); 
      //if on day of occasion 
   if(dday<=0 && dhour<=0 && dmin<=0 && dsec<=1 && today.getDate()==da) 
   { 
...
...
...

Mvg,
Dave