Tijdscript

Status
Niet open voor verdere reacties.
A

Anoesj

Gebruiker
Lid geworden
7 jan 2009
Berichten
11
Als oefening voor Javascript heb ik een eigen datum-/tijdscript geschreven. Gewoon zo'n doorsnee dingetje. Nu heb ik het probleem dat de tijd zichzelf niet refresht, terwijl dat wel zo geprogrammeerd is...

Dit is het script:
Code: 
<html>
<body onload="tijd()">
<script type="text/javascript">

function tijd(){
var datum=new Date()
var date=datum.getDate()
var month=datum.getMonth()+1
var year=datum.getYear()
var hours=datum.getHours()
var minutes=datum.getMinutes()
var seconds=datum.getSeconds()

document.write('<div style="font-family:Verdana;">')
document.write('<b>Datum:</b> ')

if(date<10){
document.write('0'+date)
}

else{
document.write(date)
}

if(month<10){
document.write('-0'+month)
}

else{
document.write('-'+month)
}
document.write('-'+year+'<br>')

if(hours<10){
var hours2="0"+hours
}
else{
var hours2=hours
}

if(minutes<10){
var minutes2="0"+minutes
}
else{
var minutes2=minutes
}

if(seconds<10){
var seconds2="0"+seconds
}
else{
var seconds2=seconds
}

document.write(hours2+':'+minutes2+':'+seconds2);

setTimeout("tijd()",1000)
}
</script>

</body>
</html>

Ik weet dat het niet geweldig is, vooral omdat ik de datum ook elke seconde refresh, maar ik wil het simpel houden. Jammer genoeg loopt de tijd dus niet.
Heeft er iemand advies?

Greets, Anoesj
 
Laatst bewerkt:
?

Misschien dat je je HTML aanpast door document.write te gebruiken. Probeer in plaats van document.write eens een DIV in je HTML te maken met een <id> en dan vervolgens gebruik te maken van document.getElementById().innerHTML

bijvoorbeeld

HTML: 
<div id='tijdDatumPrint'></div>

PHP: 
document.getElementById('tijdDatumPrint').innerHTML = datumString
 
Dat heb ik ook een keertje geprobeerd, maar toen probeerde ik de DatumString te parsen in de DIV die nog niet geschreven was, niet handig dus.

Als ik thuis ben zal ik dit eens proberen.

Wat ik wel fijn zou vinden is dat je dit stukje script in mijn eigen script zet. Want hoe wilde je die DatumString bijvoorbeeld definiëren?
 
PHP: 
datum = new Date();

datumString = (datum.getDate()<10? '0'+datum.getDate():datum.getDate()) +"-"+ ((datum.getMonth()+1 < 10)? '0'+(datum.getMonth()+1):(datum.getMonth()+1)) +"-"+ datum.getFullYear() + " " + datum.getHours() +":"+(datum.getMinutes()<10? '0'+datum.getMinutes(): datum.getMinutes()) +":"+ (datum.getSeconds()<10? '0'+datum.getSeconds():datum.getSeconds());


PS: Je gebruikt trouwens getYear(), maar je wil gebruik maken van getFullYear(). De laatste geeft de datum altijd weer in 4 karakters, maar bij getYear() ligt dat aan de browser.. sommige browsers geven het jaar dan weer in 2 of 3 karakters (bijvoorbeeld 109 ipv 2009)
 
Laatst bewerkt:
je functie tijd() mag geen gebruik maken van document.write. Je zult div.innerHTML = ... (of een span) moeten gebruiken. Dit is omdat zodra een html document is gesloten (de </html> tag is ontvangen) er niet meer bijgeschreven kan worden. Je zou immers buiten de <html></html> tags schrijven. Daarom wordt er een nieuwe, lege pagina gestart waarin geschreven wordt.

Als je éérst een div (of span) in de html zet en vervolgens je javascript dan moet dit werken. Overigens zou ik géén gebruik maken van onload. Het is niet nodig en kan soms minuten wachten tot alle plaatjes e.d. geladen zijn.

Het moet dus neerkomen op iets als dit:

Code: 
<html>
<head>
<title>Blabla</title>
</head>
<body>

<div id="div_time"></div>

<script type="text/javascript">

function tijd()
{
  document.getElementById("div_time").innerHTML = .........;
}

window.setInterval(tijd, 100);  // Dit herhaalt elke 100 ms, niet nodig om steeds een nieuwe timeout in te stellen
</script>
</body>
</html>

Dit zal nooit proberen de innerHTML van een div te veranderen die nog niet bestaat aangezien de div al klaar is op het moment dat het script uitgevoerd wordt. Dat komt doordat het script later in de html voorkomt dan de div.
 
Laatst bewerkt:
Oké, de tijd werkt nu vlekkeloos, maar nu werkt de string voor de datum niet...

Code: 
<html>

<head>
<title>Datum en tijd</title>
</head>

<body style="font-family:Verdana;">
<script type="text/javascript">
function datum(){
var datum=new Date()

var divDatum=document.getElementById("divDatum")

divDatum.innerHTML=(datum.getDate()<10? '0'+datum.getDate():datum.getDate()) +"-"+ ((datum.getMonth()+1 < 10)? '0'+(datum.getMonth()+1):(datum.getMonth()+1)) +"-"+ datum.getFullYear() + " " + datum.getHours() +":"+(datum.getMinutes()<10? '0'+datum.getMinutes(): datum.getMinutes()) +":"+ (datum.getSeconds()<10? '0'+datum.getSeconds():datum.getSeconds());  
}


function tijd(){
var datum=new Date()
var hours=datum.getHours()
var minutes=datum.getMinutes()
var seconds=datum.getSeconds()
var divTijd=document.getElementById("divTijd")

if(hours<10){
var hours2="0"+hours
}
else{
var hours2=hours
}

if(minutes<10){
var minutes2="0"+minutes
}
else{
var minutes2=minutes
}

if(seconds<10){
var seconds2="0"+seconds
}
else{
var seconds2=seconds
}

divTijd.innerHTML=(hours2+':'+minutes2+':'+seconds2)
}

setInterval(tijd,100)
</script>

<table>
<tr>
<td><b>Datum:</b> <span id="divDatum"></span></td>
</tr><tr>
<td><b>Tijd:</b> <span id="divTijd"></span></td>
</tr>
</table>

</body>
</html>
 
Als je nou je functie tijd() vervangt van dit:

Code: 
function tijd(){
var datum=new Date()
var hours=datum.getHours()
var minutes=datum.getMinutes()
var seconds=datum.getSeconds()
var divTijd=document.getElementById("divTijd")

if(hours<10){
var hours2="0"+hours
}
else{
var hours2=hours
}

if(minutes<10){
var minutes2="0"+minutes
}
else{
var minutes2=minutes
}

if(seconds<10){
var seconds2="0"+seconds
}
else{
var seconds2=seconds
}

divTijd.innerHTML=(hours2+':'+minutes2+':'+seconds2)
}

naar dit:
Code: 
function tijd()
{
  var divDatum = document.getElementById("divDatum")

  divDatum.innerHTML = (datum.getDate()<10? '0'+datum.getDate():datum.getDate()) +"-"+ ((datum.getMonth()+1 < 10)? '0'+(datum.getMonth()+1):(datum.getMonth()+1)) +"-"+ datum.getFullYear() + " " + datum.getHours() +":"+(datum.getMinutes()<10? '0'+datum.getMinutes(): datum.getMinutes()) +":"+ (datum.getSeconds()<10? '0'+datum.getSeconds():datum.getSeconds());
}

De functie datum() kun je helemaal weghalen als je dat doet.
 
Nou, dat vind ik juist niet handig, dan gaat hij de datum namelijk ook telkens refreshen. Ik had ook per ongeluk de verkeerde code neergezet. Ik ga het thuis nog eens proberen, dan kijk ik daarna wel weer verder...

Nou, dat vind ik juist niet handig, dan gaat hij de datum namelijk ook telkens refreshen. Ik had ook per ongeluk de verkeerde code neergezet. Ik ga het thuis nog eens proberen, dan kijk ik daarna wel weer verder...

By the way, dit was de code die ik in mijn vorige bericht had willen zetten:
Code: 
<html>

<head>
<title>Datum en tijd</title>
</head>

<body style="font-family:Verdana;">
<script type="text/javascript">
function datum(){
var datum=new Date();
var date=datum.getDate();
var month=datum.getMonth()+1;
var year=datum.getFullYear();
var divDatum=getElementById("divDatum");

if(date<10){
var date2=('0'+date);
}

else{
var date2=date;
}

if(month<10){
var month2=('-0'+month);
}

else{
var month2=('-'+month);
}

var year2=('-'+year);

divDatum.innerHTML=(date2+month2+year)
}


function tijd(){
var datum=new Date()
var hours=datum.getHours()
var minutes=datum.getMinutes()
var seconds=datum.getSeconds()
var divTijd=document.getElementById("divTijd")

if(hours<10){
var hours2="0"+hours
}
else{
var hours2=hours
}

if(minutes<10){
var minutes2="0"+minutes
}
else{
var minutes2=minutes
}

if(seconds<10){
var seconds2="0"+seconds
}
else{
var seconds2=seconds
}

divTijd.innerHTML=(hours2+':'+minutes2+':'+seconds2)
}

setInterval(tijd,100)
</script>

<table>
<tr>
<td><b>Datum:</b> <span id="divDatum"></span></td>
</tr><tr>
<td><b>Tijd:</b> <span id="divTijd"></span></td>
</tr>
</table>

</body>
</html>

En nog steeds werkt de datum niet.

Die DatumString van jou werkt trouwens niet...

Greets, Anoesj
 
Laatst bewerkt:
Oh sorry, ik lette niet helemaal goed op, je hebt twee aparte spans, een voor de tijd en een voor de datum. Negeer mij vorige post maar. Dan moet je één lijntje toevoegen. Onder deze lijn:
Code: 
setInterval(tijd,100);

Naar dit:
Code: 
setInterval(tijd,100);
setInterval(datum,5000); // elke 5 seconden

Dan zou ik wel de tijdsaanduiding van de datum weghalen overigens.
 
Laatst bewerkt:
Glest zei:
Je kunt wel twee spans (of divs) maken, eentje voor de datum en een voor de tijd, maar ik zou de datum ook minimaal elke 5 seconden verversen.
Klik om te vergroten...

Wat ik wil gaan doen als de datum werkt is instellen dat bij hours="0", minutes="0" en seconden="0", datum() opnieuw starten...

Ik heb mijn vorige bericht aangepast, de code was ik vergeten.
Bij die code heb ik al gebruikt gemaakt van die 2 spans, maar de datum blijft onbruikbaar...
 
Ah dat kan natuurlijk ook.

Ik heb het script onder de tabel gezet, anders kun op het moment van uitvoeren de datum nog niet worden geset omdat het element waar de tekst in moet nog niet bestaat.

Verder heb ik dit toegevoegd in de functie tijd()
Code: 
  if (hours == 0 && minutes == 0 && seconds <= 1)
  {
    datum();
  }


Dit moet werken, ookal kan ik het pas testen om 12 uur 's nachts :p

HTML: 
<html>

<head>
<title>Datum en tijd</title>
</head>

<body style="font-family:Verdana;">

<table>
<tr>
<td><b>Datum:</b> <span id="divDatum"></span></td>
</tr><tr>
<td><b>Tijd:</b> <span id="divTijd"></span></td>
</tr>
</table>



<script type="text/javascript">
function datum()
{
  var now	 = new Date();
  var date	 = now.getDate();
  var month	 = now.getMonth() + 1;
  var year	 = now.getFullYear();
  var divDatum	 = document.getElementById("divDatum");

  if(date < 10)
  {
    date		 = '0' + date;
  }

  if(month < 10)
  {
    month		 = '0' + month;
  }

  divDatum.innerHTML	 = date + '-' + month + '-' + year;
}

function tijd()
{
  var now	 = new Date();
  var hours	 = now.getHours();
  var minutes	 = now.getMinutes();
  var seconds	 = now.getSeconds();
  var divTijd	 = document.getElementById("divTijd");

  if (hours == 0 && minutes == 0 && seconds <= 1)
  {
    datum();
  }

  if(hours<10)
  {
    hours		 = "0" + hours
  }

  if(minutes<10)
  {
    minutes		 = "0" + minutes
  }

  if(seconds<10)
  {
    seconds		 = "0" + seconds
  }

  divTijd.innerHTML	 = hours + ':' + minutes + ':' + seconds;
}

setInterval(tijd,100);
datum();
tijd();
</script>



</body>
</html>
 
Dank je wel! Dit ziet er uit alsof het gaat werken, ik wist trouwens helemaal niet dat je variabelen kan herprogrammeren :p.

Dat bovenste scriptje had ik al tijdens de Engels les bedacht, maar toch bedankt ;).

EDIT: Hij werkt! Heel erg bedankt! Wat ik alleen vreemd vind is dat ik hetzelfde heb, maar dat mijn script niet werkt... :s.
Ik heb hem vergeleken, misschien dat jij de fout nog kunt vinden:
Die van mij:
Code: 
<html>

<head>
<title>Datum en tijd</title>
</head>

<body style="font-family:Verdana;">

<table>
<tr>
<td><b>Datum:</b> <span id="divDatum"></span></td>
</tr><tr>
<td><b>Tijd:</b> <span id="divTijd"></span></td>

</tr>
</table>



<script type="text/javascript">
function datum(){
	
	var now=new Date();
	var date=now.getDate();
	var month=now.getMonth()+1;
	var year=now.getFullYear();
	var divDatum=getElementById("divDatum");

	if(date<10){
		date="0"+date;
	}

	if(month<10){
		month="0"+month;
	}

	divDatum.innerHTML=date+"-"+month+"-"+year;
}


function tijd(){
	
	var now=new Date()
	var hours=now.getHours()
	var minutes=now.getMinutes()
	var seconds=now.getSeconds()
	var divTijd=document.getElementById("divTijd")

	if (hours == 0 && minutes == 0 && seconds <= 1){
		datum();
	}

	if(hours<10){
		hours="0"+hours
	}

	if(minutes<10){
		minutes="0"+minutes
	}

	if(seconds<10){
		seconds="0"+seconds
	}

	divTijd.innerHTML=hours+':'+minutes+':'+seconds)
}

setInterval(tijd,100)
tijd();
datum();
</script>


</body>
</html>

Die van jou:
Code: 
<html>

<head>
<title>Datum en tijd</title>
</head>

<body style="font-family:Verdana;">

<table>
<tr>
<td><b>Datum:</b> <span id="divDatum"></span></td>
</tr><tr>
<td><b>Tijd:</b> <span id="divTijd"></span></td>

</tr>
</table>



<script type="text/javascript">
function datum()
{
  var now	 = new Date();
  var date	 = now.getDate();
  var month	 = now.getMonth() + 1;
  var year	 = now.getFullYear();
  var divDatum	 = document.getElementById("divDatum");

  if(date < 10)
  {
    date		 = '0' + date;
  }

  if(month < 10)
  {
    month		 = '0' + month;
  }

  divDatum.innerHTML	 = date + '-' + month + '-' + year;
}

function tijd()
{
  var now	 = new Date();
  var hours	 = now.getHours();
  var minutes	 = now.getMinutes();
  var seconds	 = now.getSeconds();
  var divTijd	 = document.getElementById("divTijd");

  if (hours == 0 && minutes == 0 && seconds <= 1)
  {
    datum();
  }

  if(hours<10)
  {
    hours		 = "0" + hours
  }

  if(minutes<10)
  {
    minutes		 = "0" + minutes
  }

  if(seconds<10)
  {
    seconds		 = "0" + seconds
  }

  divTijd.innerHTML	 = hours + ':' + minutes + ':' + seconds;
}

setInterval(tijd,100);
datum();
tijd();
</script>



</body>
</html>

Nog even een kleine tip, je kon ook gewoon naar je eigen klok op de computer gaan en de tijd op 1 voor 12 zetten ofzo, de browser haalt namelijk de gegevens van je computer op ;).
 
Laatst bewerkt:
De datum veranderd mee hoor, dus heel erg bedankt, vooral jij Glest!

Greets, Anoesj
 
Graag gedaan, daarvoor zijn we hier :thumb:

Je bent overigens een haakje vergeten weg te halen bij deze lijn :p
Code: 
divTijd.innerHTML=hours+':'+minutes+':'+seconds)

De kleine dingetjes in het leven doen het hem :p
 
Damn, daarom werkte hij niet bij mij :confused:.

Anyway heel erg bedankt, als ik weer eens een vraagje heb kom ik nog wel eens langs :D.

Aah, ik heb er al 1, ik was bezig met een rekenmachine-scriptje, maar ben op een probleem gestuit. Het probleem is dat hij bij optellen de waarden input en input2 tussen "" neemt...

De code:
Code: 
<html>
	<body style="font-family:Verdana;img:hover{opacity:0,3};">
		<center>
		<span style="color:red;font-size:8pt;">Als er NaN komt te staan, betekent het dat je iets anders dan een cijfer hebt ingevoerd.</span>
		<br><br>
		<script type="text/Javascript">
			function plus(input,input2){
				var input = prompt("Eerste invoer",'');
				var input2 = prompt("Tweede invoer",'');
				var output = (input+input2);
				var divAntwoord = document.getElementById('divAntwoord');

				divAntwoord.innerHTML = "<input type='text' value='"+output+"'>"
			}

			function min(input,input2){
				var input = prompt("Eerste invoer","");
				var input2 = prompt("Tweede invoer","");
				var output = input-input2;
				var divAntwoord = document.getElementById('divAntwoord');

				divAntwoord.innerHTML = "<input type='text' value='"+output+"'>"
			}

			function delen(input,input2){
				var input = prompt("Eerste invoer","");
				var input2 = prompt("Tweede invoer","");
				var output = input/input2;
				var divAntwoord = document.getElementById('divAntwoord');

				divAntwoord.innerHTML = "<input type='text' value='"+output+"'>"
				}

			function vermenigvuldigen(input,input2){
				var input = prompt("Eerste invoer","");
				var input2 = prompt("Tweede invoer","");
				var output = input*input2;
				var divAntwoord = document.getElementById('divAntwoord');

				divAntwoord.innerHTML = "<input type='text' value='"+output+"'>"
			}
		</script>

		<table cellspacing="5">
			<tr>
				<td><img src="plus.png" onclick="plus()"></td>
				<td><img src="min.png" onclick="min()"></td>
			</tr>
			<tr>
				<td><img src="vermenigvuldigen.png" onclick="vermenigvuldigen()"></td>
				<td><img src="delen.png" onclick="delen()"></td>
			</tr>
		</table>
		
		<br><br><br>
		<div>
		<form>
		<span id="divAntwoord"><input type="text" value="Je antwoord komt hier te staan"></span>
		</form>
		</div>
		</center>
	</body>
</html>

Heb je misschien een manier om ze niet tussen "" te laten zetten bij zo'n prompt?
 
Prompt is een functie die een String (tekst) retourneert, en met strings kan je niet rekenen.

Als je dit wil oplossen gebruik je parseInt of parseFloat. Die functies zetten een string om naar (respectievelijk) een geheel getal of een getal met decimalen.

Bijv:
Code: 
var Get1 = prompt("Geef getal 1:","");
var Get2 = prompt("Geef getal 2:","");
var Som = Get1 + Get2;
alert(Som);

INPUT 1: 5
INPUT 2: 10
OUTPUT: 510
Je ziet dat hij dus die nummers als tekst behandelt en ze gewoon aaneen plakt.

Nu proberen we het eens met parseFloat:

Code: 
var Get1 = parseFloat(prompt("Geef getal 1:",""));
var Get2 = parseFloat(prompt("Geef getal 2:",""));
var Som = Get1 + Get2;
alert(Som);

INPUT 1: 5
INPUT 2: 10
OUTPUT: 15
Hier converteert hij eerst de stukjes tekst naar Floats, zodat je ermee kan gaan rekenen.
 
Laatst bewerkt:
Anoesj zei:
Damn, daarom werkte hij niet bij mij :confused:.
Klik om te vergroten...

Dergelijke syntax fouten kan je er uithalen door:
  • Firefox te gebruiken en de error/fout console te raadplegen
  • De debugger voor Internet Explorer downloaden en inschakelen

In beide gevallen zal hij aangeven in welke regel een syntax fout zit. Overigens zijn er verschillende editors die ook gelijk de syntax checken. Ik gebruik bijvoorbeeld Komodo Edit.
 
Dank je wel voor de tip! Heb je misschien ook nog een antwoordje voor mijn andere probleem?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan