Stopuhr mit cookie

DeletedUser · 5. Apr 2012

hey zusammen

ich möchte eine stopuhr mit JS bauen. hab ich hinbekommen, leider wenn ich die seite neu Lade wird sie logischerweise auf 00:00 zurück gestellt. ich möchte nun ein cookie setzen und so auslesen, das die zeit weitergeht, auch wenn ich die seit neulade... kann mir da jemand helfen?

JS

Code:

<script type="text/javascript">

var Jetzt = new Date();
var Start = Jetzt.getTime();


function ZeitAnzeigen () {
	
  var absSekunden = Math.round(ZeitBerechnen());
  var relSekunden = absSekunden % 60;
  var absMinuten = Math.abs(Math.round((absSekunden - 30) / 60));
  var anzSekunden = "" + ((relSekunden > 9) ? relSekunden : "0" + relSekunden);
  var anzMinuten = "" + ((absMinuten > 9) ? absMinuten : "0" + absMinuten);
  document.Aufenthaltsdauer.Zeit.value = anzMinuten + ":" + anzSekunden;
  window.setTimeout("ZeitAnzeigen()", 1000);
  

}

function ZeitBerechnen () {
  var Immernoch = new Date();
  return ((Immernoch.getTime() - Start) / 1000);

}
</script>

HTML

HTML:

<body onLoad="window.setTimeout('ZeitAnzeigen()', 1000);">
<form name="Aufenthaltsdauer">

	<input  type="text" size="70" name="Zeit" value="00:00">

</form>
</body>

liebe grüsse
rinu

Vidirat · 5. Apr 2012

Speicher, wenn du die Stoppuhr startest, den derzeitigen Timestamp ebenfalls als Cookie. Bei einem erneuten Seitenaufruf ziehst du den neuen Timestamp von dem gespeicherten ab und schon hast du die Differenz seit dem letzten Starten und kannst mit dieser weiter arbeiten.

Deinen Code gucke ich mir morgen noch mal genauer an; ich bin mir sicher, dass sich da noch einiges verbessern lässt.

DeletedUser · 6. Apr 2012

danke... freu mich auf dein post... ich hab nämlich kein plan wie ich das machen soll

Vidirat · 6. Apr 2012

So geht es. Falls du Hilfe brauchst, sag es mir. Es geht auch einfacher, so ist es aber viel genauer. Wenn du möchtest, kann ich das auch auf Millisekunden umschreiben.

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript Stoppuhr</title>
<script type="text/javascript">
//Hilfsfunktionen zum Manipulieren der Cookies
function createCookie(name,value,days) {if (days) {var date = new Date();date.setTime(date.getTime()+(days*24*60*60*1000));var expires = "; expires="+date.toGMTString();}else var expires = "";document.cookie = name+"="+value+expires+"; path=/";}
function readCookie(name) {var nameEQ = name + "=";var ca = document.cookie.split(';');for(var i=0;i < ca.length;i++) {var c = ca[i];while (c.charAt(0)==' ') c = c.substring(1,c.length);if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);}return null;}
function eraseCookie(name) {createCookie(name,"",-1);}

//Funktion, die uns den jetzigen Timestamp liefert
function getTimestamp(){
	return Math.floor(new Date().getTime() / 1000);
}

//Funktion die aus Sekunden einen Formatierten String (H:M:S) macht
function FormateSeconds(s){
	var Hours	= Math.floor(s / 3600);
	var Minutes	= Math.floor((s - Hours * 3600) / 60);
	var Seconds	= s - Hours * 3600 - Minutes * 60;
	
	Hours		= Hours < 10 ? "0" + Hours : Hours;
	Minutes 	= Minutes < 10 ? "0" + Minutes : Minutes;
	Seconds 	= Seconds < 10 ? "0" + Seconds : Seconds;
	
	return Hours + ":" + Minutes + ":" + Seconds;
}

var TotalTime = parseInt(readCookie('totaltime'));		//Lese die zuletzt gespeicherte Gesamtzeit aus den Cookies
if (!TotalTime)
	TotalTime = 0;
var LastUpdate = getTimestamp();	//Timestamp für das letzte Update (also jetzt)

//Setze Update Interval, dass alle 1000ms tickt
var UpdateInterval = window.setInterval(function(){
	//Addiere zur Gesamtzeit die Zeit hinzu, die seit dem letzten Update vergangen ist
	TotalTime += parseInt(getTimestamp() - LastUpdate);
	//Speichere "jetzt" als letzte Updatezeit
	LastUpdate = getTimestamp();
	//Ausgabe Updaten
	document.getElementById('zeit').innerHTML = FormateSeconds(TotalTime);
}, 1000);

//Speichere, wenn die Seite verlassen wird, die Gesamtzeit
window.onunload = function(){
	createCookie('totaltime', TotalTime, 0);
}
</script>
</head>

<body>
<h1>Javascript Stoppuhr</h1>
<p id="zeit">00:00:00</p>
</body>
</html>

DeletedUser · 7. Apr 2012

Vidirat schrieb:
So geht es. Falls du Hilfe brauchst, sag es mir. Es geht auch einfacher, so ist es aber viel genauer. Wenn du möchtest, kann ich das auch auf Millisekunden umschreiben.

eine million dank

wenn du das angebot schon machst, gehe ich sehr gerne darauf ein. ich möchte ein M:S format. heisst nach 60:00 soll es einfach weiter zählen ohne die stunden.

nachmals vielen dank

DeletedUser · 7. Apr 2012

Müsste doch nur ne If-Abfrage sein. :>

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript Stoppuhr</title>
<script type="text/javascript">
//Hilfsfunktionen zum Manipulieren der Cookies
function createCookie(name,value,days) {if (days) {var date = new Date();date.setTime(date.getTime()+(days*24*60*60*1000));var expires = "; expires="+date.toGMTString();}else var expires = "";document.cookie = name+"="+value+expires+"; path=/";}
function readCookie(name) {var nameEQ = name + "=";var ca = document.cookie.split(';');for(var i=0;i < ca.length;i++) {var c = ca[i];while (c.charAt(0)==' ') c = c.substring(1,c.length);if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);}return null;}
function eraseCookie(name) {createCookie(name,"",-1);}

//Funktion, die uns den jetzigen Timestamp liefert
function getTimestamp(){
    return Math.floor(new Date().getTime() / 1000);
}

//Funktion die aus Sekunden einen Formatierten String (H:M:S) macht
function FormateSeconds(s){
    var Hours    = Math.floor(s / 3600);
    var Minutes    = Math.floor((s - Hours * 3600) / 60);
    var Seconds    = s - Hours * 3600 - Minutes * 60;
    
    Hours        = Hours < 10 ? "0" + Hours : Hours;
    Minutes     = Minutes < 10 ? "0" + Minutes : Minutes;
    Seconds     = Seconds < 10 ? "0" + Seconds : Seconds;
    
    if(Hours > 0) {
        return Hours + ":" + Minutes + ":" + Seconds;
    } else {
        return Minutes + ":" + Seconds;
    }
}

var TotalTime = parseInt(readCookie('totaltime'));        //Lese die zuletzt gespeicherte Gesamtzeit aus den Cookies
if (!TotalTime)
    TotalTime = 0;
var LastUpdate = getTimestamp();    //Timestamp für das letzte Update (also jetzt)

//Setze Update Interval, dass alle 1000ms tickt
var UpdateInterval = window.setInterval(function(){
    //Addiere zur Gesamtzeit die Zeit hinzu, die seit dem letzten Update vergangen ist
    TotalTime += parseInt(getTimestamp() - LastUpdate);
    //Speichere "jetzt" als letzte Updatezeit
    LastUpdate = getTimestamp();
    //Ausgabe Updaten
    document.getElementById('zeit').innerHTML = FormateSeconds(TotalTime);
}, 1000);

//Speichere, wenn die Seite verlassen wird, die Gesamtzeit
window.onunload = function(){
    createCookie('totaltime', TotalTime, 0);
}
</script>
</head>

<body>
<h1>Javascript Stoppuhr</h1>
<p id="zeit">00:00:00</p>
</body>
</html>

Miep. Funktioniert jedoch nur, wenn Hours ein INT-Wert wäre, was es ja nicht ist (weil da nen 0 vorne ran kommt, pöses Vidirat).

Vidirat · 8. Apr 2012

FalkenaugeMihawk schrieb:
Müsste doch nur ne If-Abfrage sein. :>

Wie meinst du das?

Miep. Funktioniert jedoch nur, wenn Hours ein INT-Wert wäre, was es ja nicht ist (weil da nen 0 vorne ran kommt, pöses Vidirat).

Das funktioniert so bestens; ich habe das live getestet. Schließlich parse ich ja den String zu einem Int.

@quäntchen: Wegen Ostern schaffe ich das heute nicht mehr. Ich gucke mal, ob das morgen was wird. Dann werde ich gleich noch eine Ungenauigkeit ausgleichen. Verstehst du denn den Code soweit? Es bringt ja nichts, wenn ich dir das fertig gebe und du gar nicht verstehst, was da eig. passiert.

DeletedUser · 8. Apr 2012

Vidirat schrieb:
Wie meinst du das?

Das funktioniert so bestens; ich habe das live getestet. Schließlich parse ich ja den String zu einem Int.

@quäntchen: Wegen Ostern schaffe ich das heute nicht mehr. Ich gucke mal, ob das morgen was wird. Dann werde ich gleich noch eine Ungenauigkeit ausgleichen. Verstehst du denn den Code soweit? Es bringt ja nichts, wenn ich dir das fertig gebe und du gar nicht verstehst, was da eig. passiert.

Ich wäre froh, wenn du nicht den ganzen Post auseinander nimmst und auch die Posts in chronologischer Reihenfolge liest und nicht umgekehrt.

DeletedUser · 8. Apr 2012

Vidirat schrieb:
@quäntchen: Wegen Ostern schaffe ich das heute nicht mehr. Ich gucke mal, ob das morgen was wird. Dann werde ich gleich noch eine Ungenauigkeit ausgleichen. Verstehst du denn den Code soweit? Es bringt ja nichts, wenn ich dir das fertig gebe und du gar nicht verstehst, was da eig. passiert.

ja, soweit versteh ich es. jetzt da ich es sehe ist es logsch -.- ich rufe es jedoch duch den body onLoad ab. so hab ich direkt die Zeit, und nicht nicht eine sekunde die 00:00. aber das ist peanuts ;-)

und FalkenaugeMihawk
es funktioniert bestens. wie gesagt wird die zeit mit parseInt() wieder in eine zahl gewandelt

Vidirat · 8. Apr 2012

FalkenaugeMihawk schrieb:
Ich wäre froh, wenn du nicht den ganzen Post auseinander nimmst und auch die Posts in chronologischer Reihenfolge liest und nicht umgekehrt.

Ich habe schon gemerkt, was du meinst; den Post vor deinen habe ich gestern schon gelesen und daher nicht mehr erneut. Was du aber mit dem String meinst habe ich immer noch nicht verstanden. Evtl. komm ich noch darauf.

@quäntchen. Gut, dass du es verstehst^^ Genau das mit dem onLoad habe ich u.a. gemeint.

Stopuhr mit cookie

DeletedUser

Gast

Vidirat

Gast

DeletedUser

Gast

Vidirat

Gast

DeletedUser

Gast

DeletedUser

Gast

Vidirat

Gast

DeletedUser

Gast

DeletedUser

Gast

Vidirat

Gast