Javascript Pomodoro Uhr Countdown body onload funktion in button aufrufen und reset

E

Enomine

Grünschnabel
Hallo,

ich habe mich um eine Ausbildung beworben und habe vom Unternehmen 3 Aufgaben zum lösen erhalten um meine Qualitäten zu prüfen.

1. Pomodoro Uhr
· Erstellen Sie unter Verwendung von HTML5 und JavaScript eine einfache Web Site, mit deren Hilfe die Funktion eines Pomodoro Timers abgebildet werden kann.
· Die Zeit bis zum Ablaufen des Timers soll in Minuten einstellbar sein. Die verbleibende Zeit bis zum Alarm soll jederzeit auf der Seite sichtbar sein.
· Nach Ablauf der Zeit ertönt ein Signal
Zum Vergrößern anklicken....

Mein derzeitiger Entwicklungsstand ist das ich einen Countdown habe der von body onload gestartet wird und bis 0 läuft. Als nächstes wollte ich das so Umstellen, dass ich ein Eingabefeld mache wo ich eine Zahl reinschreibe und der Countdown dann auf diese Minutenanzahl gesetzt wird, sobald ich auf einen Startbutton klicke. Dazu kam ich aber garnicht.

Funktionierender Countdown 5 Sekunden:

HTML: 
<html>
<BODY TEXT="#FFFFFF" LINK="#FFFFFF" VLINK="#999999" ALINK="#00FF00" BGCOLOR="#000000" onload="clock()">
<Center>
<script>
var diffMonths=-1, diffDays=-1, diffHours=-1, diffMins=-1, diffSecs=-1
compDat = new Date(new Date().getTime()+5000)


var msPerMonth = 31 * 24 * 60 * 60 * 1000
var msPerDay = 24 * 60 * 60 * 1000
var msPerHour = 60 * 60 * 1000
var msPerMin = 60 * 1000
var msPerSec = 1000
var work = true

function clock(){
     var today = new Date()
     var changeD = diffDays
     var changeH = diffHours
     var changeMin = diffMins  
     var changeSec = diffSecs   
     var diffMs = compDat.getTime() - today.getTime()
     diffDays = Math.floor(diffMs / msPerDay)
     diffMs -= diffDays * msPerDay
     diffHours = Math.floor(diffMs / msPerHour)
     diffMs -= diffHours * msPerHour
     diffMins = Math.floor(diffMs / msPerMin)
     diffMs -= diffMins * msPerMin
     diffSecs = Math.floor(diffMs / msPerSec)     
     diffMs -= diffSecs * msPerSec
     if(changeD!=diffDays) document.forms[0].days.value=diffDays
     if(changeH!=diffHours) document.forms[0].hours.value=diffHours
     if(changeMin!=diffMins) document.forms[0].mins.value=diffMins
     if(changeSec!=diffSecs) document.forms[0].secs.value=diffSecs
     document.forms[0].millis.value=diffMs
     if (work == true) {
     	if (work && diffDays > 0 || diffHours > 0 || diffMins > 0 || diffSecs > 0 || diffMs > 136) {
     		timerID = setTimeout("clock()",111)
     	} else {
     		work = false;
     		timerID = setTimeout("clock()",diffMs-25);
     	}
     } else {
     	alert('beendet');
     }
     }
</SCRIPT>
<FORM><B><FONT FACE="Arial,Helvetica" SIZE="1">Noch
<input type="text" name="days" size="2"> Tage 
<input type="text" name="hours" size="2"> Stunden
<input type="text" name="mins" size="2"> Minuten
<input type="text" name="secs" size="2"> Sekunden 
<input type="text" name="millis" size="2"> Millisekunden bis zum Ende der Arbeitsperiode

<br><br><br>
</FONT></B>
</FORM>
</CENTER>
</BODY>
</HTML>

Statt onload per Button starten:
Als nächstes wollte ich den onload rausnehmen und "clock()" durch einen Button starten:
Änderung: onload raus, button mit onclick rein.
Resultat: Ohne funktion

HTML: 
<html>
<BODY TEXT="#FFFFFF" LINK="#FFFFFF" VLINK="#999999" ALINK="#00FF00" BGCOLOR="#000000" onload="">
<Center>
<script>
var diffMonths=-1, diffDays=-1, diffHours=-1, diffMins=-1, diffSecs=-1
compDat = new Date(new Date().getTime()+5000)


var msPerMonth = 31 * 24 * 60 * 60 * 1000
var msPerDay = 24 * 60 * 60 * 1000
var msPerHour = 60 * 60 * 1000
var msPerMin = 60 * 1000
var msPerSec = 1000
var work = true

function clock(){
     var today = new Date()
     var changeD = diffDays
     var changeH = diffHours
     var changeMin = diffMins  
     var changeSec = diffSecs   
     var diffMs = compDat.getTime() - today.getTime()
     diffDays = Math.floor(diffMs / msPerDay)
     diffMs -= diffDays * msPerDay
     diffHours = Math.floor(diffMs / msPerHour)
     diffMs -= diffHours * msPerHour
     diffMins = Math.floor(diffMs / msPerMin)
     diffMs -= diffMins * msPerMin
     diffSecs = Math.floor(diffMs / msPerSec)     
     diffMs -= diffSecs * msPerSec
     if(changeD!=diffDays) document.forms[0].days.value=diffDays
     if(changeH!=diffHours) document.forms[0].hours.value=diffHours
     if(changeMin!=diffMins) document.forms[0].mins.value=diffMins
     if(changeSec!=diffSecs) document.forms[0].secs.value=diffSecs
     document.forms[0].millis.value=diffMs
     if (work == true) {
     	if (work && diffDays > 0 || diffHours > 0 || diffMins > 0 || diffSecs > 0 || diffMs > 136) {
     		timerID = setTimeout("clock()",111)
     	} else {
     		work = false;
     		timerID = setTimeout("clock()",diffMs-25);
     	}
     } else {
     	alert('beendet');
     }
     }
</SCRIPT>
<FORM><B><FONT FACE="Arial,Helvetica" SIZE="1">Noch
<input type="text" name="days" size="2"> Tage 
<input type="text" name="hours" size="2"> Stunden
<input type="text" name="mins" size="2"> Minuten
<input type="text" name="secs" size="2"> Sekunden 
<input type="text" name="millis" size="2"> Millisekunden bis zum Ende der Arbeitsperiode
<button onclick="clock();">los</button>

<br><br><br>
</FONT></B>
</FORM>
</CENTER>
</BODY>
</HTML>

Countdown resetten:
Dann hab ich mir gedacht brauche auch ne funktion um den countdown auf eine neue Zeit zurückzusetzen. Hier z.b. 10 Sekunden. Hier ist die ausführung wieder per onload, der Button ruft dann die Funktion zum setzen einer neuen Zeit auf. Meiner logik zufolge müsste das doch zur Laufzeit einfach zu ändern sein. Jedoch fängt der Countdown immer wieder bei 5 Sekunden an zu zählen und nicht bei 10. Er fängt also neu an zu zählen aber eben nicht beim Wunschwert.
Änderung: onload wieder rein, button verlinkt zu start(), funktion start() hinzugefügt zum neusetzen des countdown
Resultat: funktioniert nur halb

HTML: 
<html>
<BODY TEXT="#FFFFFF" LINK="#FFFFFF" VLINK="#999999" ALINK="#00FF00" BGCOLOR="#000000" onload="clock()">
<Center>
<script>
var diffMonths=-1, diffDays=-1, diffHours=-1, diffMins=-1, diffSecs=-1
compDat = new Date(new Date().getTime()+5000)


var msPerMonth = 31 * 24 * 60 * 60 * 1000
var msPerDay = 24 * 60 * 60 * 1000
var msPerHour = 60 * 60 * 1000
var msPerMin = 60 * 1000
var msPerSec = 1000
var work = true

function start() {
work = true
compDat.setTime(new Date().getTime()+10000)
}


function clock(){
     var today = new Date()
     var changeD = diffDays
     var changeH = diffHours
     var changeMin = diffMins  
     var changeSec = diffSecs   
     var diffMs = compDat.getTime() - today.getTime()
     diffDays = Math.floor(diffMs / msPerDay)
     diffMs -= diffDays * msPerDay
     diffHours = Math.floor(diffMs / msPerHour)
     diffMs -= diffHours * msPerHour
     diffMins = Math.floor(diffMs / msPerMin)
     diffMs -= diffMins * msPerMin
     diffSecs = Math.floor(diffMs / msPerSec)     
     diffMs -= diffSecs * msPerSec
     if(changeD!=diffDays) document.forms[0].days.value=diffDays
     if(changeH!=diffHours) document.forms[0].hours.value=diffHours
     if(changeMin!=diffMins) document.forms[0].mins.value=diffMins
     if(changeSec!=diffSecs) document.forms[0].secs.value=diffSecs
     document.forms[0].millis.value=diffMs
     if (work == true) {
     	if (work && diffDays > 0 || diffHours > 0 || diffMins > 0 || diffSecs > 0 || diffMs > 136) {
     		timerID = setTimeout("clock()",111)
     	} else {
     		work = false;
     		timerID = setTimeout("clock()",diffMs-25);
     	}
     } else {
     	alert('beendet');
     }
     }
</SCRIPT>
<FORM><B><FONT FACE="Arial,Helvetica" SIZE="1">Noch
<input type="text" name="days" size="2"> Tage 
<input type="text" name="hours" size="2"> Stunden
<input type="text" name="mins" size="2"> Minuten
<input type="text" name="secs" size="2"> Sekunden 
<input type="text" name="millis" size="2"> Millisekunden bis zum Ende der Arbeitsperiode
<button onclick="start();">newtime</button>
<br><br><br>
</FONT></B>
</FORM>
</CENTER>
</BODY>
</HTML>

Per Button starten und resetten:
Schlussendlich muss ich das ganze per Buttonklick starten können und dabei soll der Countdown neu gesetzt werden. Also hier beides zusammen:
Änderung: onload raus, button wie gehabt, start() um funktionaufruf von clock() erweitert
Resultat: ohne funktion

HTML: 
<html>
<BODY TEXT="#FFFFFF" LINK="#FFFFFF" VLINK="#999999" ALINK="#00FF00" BGCOLOR="#000000" onload="">
<Center>
<script>
var diffMonths=-1, diffDays=-1, diffHours=-1, diffMins=-1, diffSecs=-1
compDat = new Date(new Date().getTime()+5000)


var msPerMonth = 31 * 24 * 60 * 60 * 1000
var msPerDay = 24 * 60 * 60 * 1000
var msPerHour = 60 * 60 * 1000
var msPerMin = 60 * 1000
var msPerSec = 1000
var work = true

function start() {
work = true
compDat.setTime(new Date().getTime()+10000)
clock();
}


function clock(){
     var today = new Date()
     var changeD = diffDays
     var changeH = diffHours
     var changeMin = diffMins  
     var changeSec = diffSecs   
     var diffMs = compDat.getTime() - today.getTime()
     diffDays = Math.floor(diffMs / msPerDay)
     diffMs -= diffDays * msPerDay
     diffHours = Math.floor(diffMs / msPerHour)
     diffMs -= diffHours * msPerHour
     diffMins = Math.floor(diffMs / msPerMin)
     diffMs -= diffMins * msPerMin
     diffSecs = Math.floor(diffMs / msPerSec)     
     diffMs -= diffSecs * msPerSec
     if(changeD!=diffDays) document.forms[0].days.value=diffDays
     if(changeH!=diffHours) document.forms[0].hours.value=diffHours
     if(changeMin!=diffMins) document.forms[0].mins.value=diffMins
     if(changeSec!=diffSecs) document.forms[0].secs.value=diffSecs
     document.forms[0].millis.value=diffMs
     if (work == true) {
     	if (work && diffDays > 0 || diffHours > 0 || diffMins > 0 || diffSecs > 0 || diffMs > 136) {
     		timerID = setTimeout("clock()",111)
     	} else {
     		work = false;
     		timerID = setTimeout("clock()",diffMs-25);
     	}
     } else {
     	alert('beendet');
     }
     }
</SCRIPT>
<FORM><B><FONT FACE="Arial,Helvetica" SIZE="1">Noch
<input type="text" name="days" size="2"> Tage 
<input type="text" name="hours" size="2"> Stunden
<input type="text" name="mins" size="2"> Minuten
<input type="text" name="secs" size="2"> Sekunden 
<input type="text" name="millis" size="2"> Millisekunden bis zum Ende der Arbeitsperiode
<button onclick="start();">pomodoro starten</button>
<br><br><br>
</FONT></B>
</FORM>
</CENTER>
</BODY>
</HTML>


Schlussendlich hänge ich hier seid Stunden an diesem pissel-Problem, obwohl ich wohl noch viel wichtigere Probleme haben werde aber ich komme nicht weiter, weil es hier schon nicht funktioniert.
Ich habe keine Idee woran es liegt, dass
1) die Funktion clock nur dann richtig arbeitet, wenn sie von onload aufgerufen wird
und
2) es nicht möglich ist den Wert von compDat zu ändern sodass er ab 10 Sekunden runterzählt. Er ändert ihn aber! Jedoch auf 5 Sekunden in der Zukunft, statt der angegebenen 10 Sekunden in der Zukunft.

Danke - Enomine
 
Hi

Enomine hat gesagt.:
ich habe mich um eine Ausbildung beworben und habe vom Unternehmen 3 Aufgaben zum lösen erhalten um meine Qualitäten zu prüfen.
Zum Vergrößern anklicken....
Hmm...wäre das nicht eig. deine Aufgabe...?

Was tut du, wenn jemand von der Firma das hier sieht?
Oder jemand, der einfach gemein ist und dich deswegen verpfeift?
 
Öhm ich glaub du hast mich garnicht richtig verstanden. Ich versuche die Aufgaben zu lösen und hänge gerade an der ersten Aufgabe fest. Die Aufgaben bestehen nicht aus dem was ich hier als Code gesendet habe. Warum sollte ich mir keine Hilfe holen? Das ist der Alltag eines Fachinformatikers, dass er Probleme löst, egal wie. Man muss nicht alles wissen o_O

Deine Vorsicht ist völlig unbegründet, glaub mir.

Also kannst du helfen?

Danke - Enomine
 
Zum "Alltag" eines FI: Wenn es zum Alltag gehört,
für bezahlte Arbeit andere Freiwillige machen zu lassen...
naja.

Zum ersten nicht funktionierenden Code (Statt onload per Button starten):
Ist das Alles oder hast du einen Teil nicht ins Forum gepostet?
Wenn letzteres: Nachreichen wäre hilfreich.

Sonst:
* Doctype fehlt
* Gesamter Headblock fehlt :suspekt:
* Script in Head rein
* Das Form verursacht bei mir ein Neuladen der Seite bei Buttonklicks,
kann dem JS also nur hinderlich sein. Weg damit.
* Statt dem (nicht mehr funktionierenden) document.forms[0]
könnte man doch sowas wie getElementByID verwenden...
* Deine unterschiedlichen Arten von Groß/kleinschreibung bei den Tags
sind zwar erlaubt, aber nicht schön.
* Wie wäre es mit CSS?
usw...
Die ersten paar Punkte bringen das dann auch zum Laufen.
Aber da ist einiges an Nachholbedarf (auch bei Verwendung von Validator&Fehlerkonsole...)

Zu den anderen Sachen ggf. dann, wenn das mal funktioniert.
Vllt. lösen sich die weiteren Probleme dadurch gleich in Luft auf...

Etwas noch zum funktionierenden Code am Anfang (außer dem Genannten):
Am Ende der Zeit (nach der Meldung) zeigts noch immer ein paar Millisekunden an.
Vllt. auf 0 setzen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück