Zeit laufen lassen

asterix3 · 19. Sep. 2015

Hallo zusammen
Ich möchte auf meiner HP die Zeit laufen lassen. Folgendes Script habe ich (hier muss man aber reloaden):

Code:

<html><head><title>laufende Zeit</title>
<script type="text/javascript">
<!--
 var jetzt = new Date();
 var Std = jetzt.getHours();
 var Min = jetzt.getMinutes();
 var Sec = jetzt.getSeconds();
 var StdAusgabe  = ((Std < 10) ? "0" + Std : Std);
 var MinAusgabe  = ((Min < 10) ? "0" + Min : Min);
 var SecAusgabe  = ((Sec < 10) ? "0" + Sec : Sec);
document.write("Es ist nun genau " + StdAusgabe + ":" + MinAusgabe + ":" + SecAusgabe + " Uhr");
//-->
</script>
</head><body>
</body></html>

Kennt jemand einen Trick, wie die Uhr weiter läuft?
Danke im Voraus!

Dormilich · 20. Sep. 2015

Kennt jemand einen Trick, wie die Uhr weiter läuft?

kein document.write() und rekursive Funktionen nutzen.

tsseh · 20. Sep. 2015

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

asterix3 · 20. Sep. 2015

Vielen Dank für eure Antworten.
Nun habe ich gelesen, getestet... kann nicht gut englisch.
Wo müsste ich dieses setInterval nun einsetzen?
Ich habe es so unter anderem versucht:

Code:

<html><head><title>laufende Zeit</title>
<script type="text/javascript">
<!--
 var jetzt = new Date();
 var Std = jetzt.getHours();
 var Min = jetzt.getMinutes();
 var Sec = jetzt.getSeconds();
 var StdAusgabe  = ((Std < 10) ? "0" + Std : Std);
 var MinAusgabe  = ((Min < 10) ? "0" + Min : Min);
 var SecAusgabe  = ((Sec < 10) ? "0" + Sec : Sec);
var Ausgabe = "Es ist nun genau " + StdAusgabe + ":" + MinAusgabe + ":" + SecAusgabe + " Uhr";
var intervalID = window.setInterval(Ausgabe, 1);
document.write(intervalID);
//-->
</script>
</head><body>
</body></html>

tsseh · 20. Sep. 2015

du musst eine funktion an setInterval übergeben

Code:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      var zeit = 0;
      function displayTime()
      {
        zeit += 1;
        var elem = document.getElementById("time");
        elem.innerHTML = "" + zeit;
      }
      document.addEventListener("DOMContentLoaded", function()
      {
        setInterval(displayTime, 1000);
      });
    </script>
  </head>
  <body >
    <div id="time"></div>
  </body>
</html>

asterix3 · 20. Sep. 2015

Danke für die Hilfe.
Ich bin nun einen grossen Schritt weiter.
Die laufende Zeit habe ich schon mal auf der Seite. Nun möchte ich sie aber bei jedem einzelnen Schwimmer eintragen.
Es sieht so aus:

Code:

</script>
</head>

<body onload="Time()"> // hier funktioniert es - mit der ersten vorhandenen Zeit.
<div id="txt"></div>
 
<?php echo "<tr> 
	<td>".$row_res['name']."</td> <td><body onload="Time()"><div id="txt"></div></td>";
?>

Da werden alle Schwimmer aus der Datenbank geholt und nun möchte ich ihnen die Zeit zuordnen.
Das gibt aber leider eine Fehlermeldung: Parse error: unexpected 'Time' T-String....
Kann jemand weiterhelfen?

kkapsner · 23. Sep. 2015

Mit setInterval würde ich keine Uhr in JS laufen lassen. Ist viel zu ungenau und genau für sowas gibt es ja Date.now:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
</head>
<body>
<div id="time"></div>
<script type="text/javascript">
(function(){
	var start = Date.now();
	var displayNode = document.getElementById("time");
	function display(){
		var elapsed = Date.now() - start;
		displayNode.innerHTML = (elapsed / 1000).toFixed(1) + " s";
		window.setTimeout(display, 100 - (elapsed % 100));
	}
	display();
}());
</script>
</body>
</html>

Bei deinem neuen Code hsat du gleich drei Probleme:

Zuerst hast du in PHP ein Escapingproblem... wenn du ein " im HTML ausgeben möchtest, musst du das natürlich im PHP-String maskieren.
Dann ist dein HTML massiv invalide, da es nur ein <body> geben darf.
Zu guter Letzt hast du einen Fehler in deiner Logik - woher soll denn die Funktion Time (wie sieht die denn überhaupt aus?) wissen auf welchem <div> sie arbeiten muss? Und wenn der Aufruf jedes Mal identisch ist, warum muss die überhaupt für jeden Schwimmer einzeln aufgerufen werden?

Ich denke mal, dass du am Ende in etwa so etwas willst:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
</head>
<body>
<div class="time"></div>
<div class="time"></div>
<div class="time"></div>
<div class="time"></div>
<div class="time"></div>
<script type="text/javascript">
(function(){
	var start = Date.now();
	Array.prototype.slice.call(document.getElementsByClassName("time")).forEach(function(containerNode){
		
		var timeout = null;
		
		var stopNode = document.createElement("button");
		containerNode.appendChild(stopNode);
		stopNode.innerHTML = "stop";
		stopNode.addEventListener("click", function(){
			window.clearTimeout(timeout);
		}, false);
		
		
		
		var displayNode = document.createElement("span");
		containerNode.appendChild(displayNode);
		function display(){
			var elapsed = Date.now() - start;
			displayNode.innerHTML = (elapsed / 1000).toFixed(1) + " s";
			timeout = window.setTimeout(display, 100 - (elapsed % 100));
		}
		display();
	});
}());
</script>
</body>
</html>

asterix3 · 30. Sep. 2015

Herzlichen Dank!
Ich möchte aber nicht die Zeiten stoppen. Ich möchte die Zeiten der einzelnen Schwimmer anzeigen.
Wie kann ich diese Funktion nun in meinen Code einbauen?
Ich hole zuerst die Startzeit des Schwimmers aus der Datenbank und möchte sie nachher für jeden einzelnen anzeigen lassen.

PHP:

	<td>".$row_res['name']."</td> <td><body onload="Time()"><div id="txt"></div></td>";

Wie kann ich nun den Code von kkapsner einbauen? Das funktionert, nur dass ich nicht von 0 her laufen lassen möchte, sondern meine vorhandene Zeit einsetzen.
Herzlichen Dank für eure Hilfe!

- - - Aktualisiert - - -

Ich versuche es noch genauer zu erklären:

Code:

<html><head><title></title>
<!-- laufende Zeit reinholen -->
<script type="text/javascript">
 var jetzt = new Date();
 var Std = jetzt.getHours();
 var Min = jetzt.getMinutes();
 var Sec = jetzt.getSeconds();
 var allinone= (Std*3600+Min*60+Sec);
 var startzeit= "<?php echo $start;?>" 
 var running= (allinone- startzeit);
 var runningtime = ((running < 0) ? "" : running);
 
 var hour = Math.floor( runningtime / 3600);
 var hourAusg = hour; 
 var minute = Math.floor((runningtime%3600) / 60);
 var minAusg = ((minute < 10) ? "0" + minute : minute);
  var second = Math.floor(runningtime%60);
 var secAusg = ((second < 10) ? "0" + second : second);
  var runminsec =((runningtime =='') ? "" : hourAusg+":"+minAusg+":"+secAusg);
 var runminsec =((runningtime < 3600) ? minAusg+":"+secAusg : hourAusg+":"+minAusg+":"+secAusg);


</script>
</head>

Im Table habe ich dann:

PHP:

 	echo "<tr> <td>".$row['name']."<td align='right'>"; echo "<i><script  type='text/javascript'>document.write(runminsec)</script></i></td></tr>";

Das funktioniert, aber die Sekunden laufen nicht weiter (ausser ich lade die Seite neu). Wie kann ich die zum Laufen bringen?

kkapsner · 01. Okt. 2015

Wie bist du eigentlich auf die Idee gekommen, dass du einfach irgendwo im HTML lauter <body>-Anfänge reinbauen kannst?

asterix3 schrieb:
sondern meine vorhandene Zeit einsetzen.

Dann kannst du z.B. mit einem Offset arbeiten:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
</head>
<body>
<div class="time" data-offset="4.32"></div>
<div class="time" data-offset="8.13"></div>
<div class="time" data-offset="2.76"></div>
<div class="time" data-offset="6.33"></div>
<div class="time" data-offset="4.67"></div>
<div class="time" data-offset="3.36"></div>
<div class="time" data-offset="7.94"></div>
<script type="text/javascript">
(function(){
	var start = Date.now();
	Array.prototype.slice.call(document.getElementsByClassName("time")).forEach(function(containerNode){
		var timeout = null;
		var offset = parseFloat(containerNode.dataset.offset) || 0;
		
		var stopNode = document.createElement("button");
		containerNode.appendChild(stopNode);
		stopNode.innerHTML = "stop";
		stopNode.addEventListener("click", function(){
			window.clearTimeout(timeout);
		}, false);
		
		var displayNode = document.createElement("span");
		containerNode.appendChild(displayNode);
		function display(){
			var elapsed = Date.now() - start;
			displayNode.innerHTML = (offset + elapsed / 1000).toFixed(1) + " s";
			timeout = window.setTimeout(display, 100 - (elapsed % 100));
		}
		display();
	});
}());
</script>
</body>
</html>

Zeit laufen lassen

asterix3

New member

Dormilich

New member

tsseh

Lounge-Member

asterix3

New member

tsseh

Lounge-Member

asterix3

New member

kkapsner

Super Moderator

asterix3

New member

kkapsner

Super Moderator