Ergebnis 1 bis 5 von 5
  1. #1
    Enomine ist offline Grünschnabel
    registriert
    30-05-2013
    Beiträge
    2

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

    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
    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-Code:
    <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-Code:
    <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-Code:
    <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-Code:
    <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

  2. #2
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Javascript Pomodoro Uhr Countdown body onload funktion in button aufrufen und res

    Offtopic: Benutze doch bitte richtige HTML5-Syntax. So sieht's lächerlich aus ...

  3. #3
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Javascript Pomodoro Uhr Countdown body onload funktion in button aufrufen und res

    zu 2.: SELFHTML: HTML/XHTML / Referenz /HTML-Attribut-Referenz -> Attribut type.

    zu 1.: klicke mal auf den Button ganz schnell, nachdem die Seite geladen wurde, dann siehst du dein Problem eventuell.

    PS: globale Variablen sind wiklich nicht schön und die meisten hier auch komplett überflüssig.
    PPS: window.setTimeout() sollte man nicht mit einem String als Parameter aufrufen, sondern mit einer Funktionsreferenz.

  4. #4
    Enomine ist offline Grünschnabel
    registriert
    30-05-2013
    Beiträge
    2

    AW: Javascript Pomodoro Uhr Countdown body onload funktion in button aufrufen und res

    Dankeschön für die ersten Ansätze.

    Zitat Zitat von kkapsner Beitrag anzeigen
    Ich weiß nicht warum du mich hierauf hingewiesen hast. onclick ist beim button als universalattribut erlaubt und funktioniert defacto auch. start() wird tatsächlich aufgerufen (habe ich mit alert geprüft). Das Problem ist jedoch, dass der Befehl "compDat.setTime(new Date().getTime()+10000)" das compDat nicht auf 10 Sekunden in der Zukunft setzt, sondern immer genau so weit in die Zukunft, wie es ursprünglich auch im Global vereinbart wurde, also hier 5 Sekunden. Dabei wird aber tatsächlich der Zukunftswert geändert, wenn der Button nach 1 Sekunde erneut geklickt wird dann fängt er von 5 wieder an zu zählen obwohl er von 10 zählen sollte. Ich weiß nicht warum das so ist.
    Zitat Zitat von kkapsner Beitrag anzeigen
    zu 1.: klicke mal auf den Button ganz schnell, nachdem die Seite geladen wurde, dann siehst du dein Problem eventuell.
    Ich sehe keinen Unterschied ob ich 5 Sekunden warte oder in weniger als 1 Sekunde drauf klicke. Ich sehe nämlich nur das die Zahlen ganz kurz aufblitzen und sofort wieder weg sind. Mein Problem sehe ich nicht, siehst du mehr? Wie gesagt bei onload klappt es einwandfrei (abgesehen vom reset). Warum der Countdown per Buttonklick nicht funktioniert weiß ich nicht.
    Zitat Zitat von kkapsner Beitrag anzeigen
    PS: globale Variablen sind wiklich nicht schön und die meisten hier auch komplett überflüssig.
    Es geht hier bewusst erstmal nur um Funktion, nicht um Schönheit oder Sicherheit.
    Zitat Zitat von kkapsner Beitrag anzeigen
    PPS: window.setTimeout() sollte man nicht mit einem String als Parameter aufrufen, sondern mit einer Funktionsreferenz.
    Werde ich mir noch anschauen.

    Danke - Enomine

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Javascript Pomodoro Uhr Countdown body onload funktion in button aufrufen und res

    Zitat Zitat von Enomine Beitrag anzeigen
    Ich weiß nicht warum du mich hierauf hingewiesen hast. onclick ist beim button als universalattribut erlaubt und funktioniert defacto auch. start() wird tatsächlich aufgerufen (habe ich mit alert geprüft). Das Problem ist jedoch, dass der Befehl "compDat.setTime(new Date().getTime()+10000)" das compDat nicht auf 10 Sekunden in der Zukunft setzt, sondern immer genau so weit in die Zukunft, wie es ursprünglich auch im Global vereinbart wurde, also hier 5 Sekunden. Dabei wird aber tatsächlich der Zukunftswert geändert, wenn der Button nach 1 Sekunde erneut geklickt wird dann fängt er von 5 wieder an zu zählen obwohl er von 10 zählen sollte. Ich weiß nicht warum das so ist.
    Das weiß ich schon - deswegen, hatte ich ja auch "Attribut type" hinter den Link geschrieben. Da ist der default "submit" --> dein Formular wird abgesendet und deswegen die Seite neu geladen. Erzeugt erst einmal beide Probleme, aber beim erste ist noch dabei, dass du die Startzeit gloabl beim Seitenaufbau festlegst - das hättest du dann gesehen, wenn du ganz schnell nach dem Seitenaufbau auf den Button klickst, nachdem du das zweite Problem beseitigt hast.

    Zitat Zitat von Enomine Beitrag anzeigen
    Es geht hier bewusst erstmal nur um Funktion, nicht um Schönheit oder Sicherheit.
    Man sollte immer gleich am Anfang schauen, dass man schön und sicher programmiert. Erspart einem viel Nacharbeit und Kopfschmerzen.

Ähnliche Themen

  1. Funktion durch Button (Pfeil) aufrufen
    Von typo3_hp im Forum JavaScript
    Antworten: 29
    Letzter Beitrag: 17-08-2011, 20:10
  2. Body onload in Javascript
    Von hasher im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 07-05-2009, 08:47
  3. Antworten: 12
    Letzter Beitrag: 29-05-2008, 21:18
  4. javascript im body neu aufrufen
    Von just2b im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 19-04-2006, 08:35
  5. body onload & function window.onload()
    Von Apoplexy im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 29-06-2005, 00:12

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •