Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

Javascript Timer/Stoppuhr

Werbeanzeige

moritz31

Treue Seele

  • »moritz31« ist der Autor dieses Themas

Beiträge: 259

Wohnort: Hessen

Beruf: Student

  • Private Nachricht senden

1

13.08.2013, 02:20

Javascript Timer/Stoppuhr

Moin,

ich bewege mich aktuell neu auf dem Gebiet HTML/CSS/JS.

Jetzt wollte ich mal eine kleine Anwendung bauen, die die Reaktionszeit misst. Dazu drückt man die Leertaste und ein zufällig Countdown läuft im Hintergrund.
Danach startet der richtige Timer, welcher dann die Reaktionszeit misst.

Aktuell sieht mein Code so aus:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

var Datum;
var Stop;

function startTimer(Ereignis)
{
   if (!Ereignis)
    Ereignis = window.event;
   //alert(Ereignis.keyCode);
  
  if(Ereignis.keyCode == 32)
  {
    document.getElementById('btnM').style.backgroundColor = 'black';
    window.setTimeout(start(),getRandomInt(5,13));
    
  }
}
document.onkeypress = startTimer;
function start()
{
    stop = false;
    Datum = new Date();
    uhr();
} 

function uhr()
{
    while(stop == false)
    {
    var AktuellesDatum = new Date();
    var Vergangen = new Date (AktuellesDatum - Datum);
    var milli = Vergangen.getMilliseconds();
    var sekunden = Vergangen.getSeconds();
    var minuten = Vergangen.getMinutes();

    var zeit = sekunden+":"+milli;

    document.all.Time.innerText = zeit; 
        if(sekunden >= 5)
        {
            stop = true;
            alert("Zu langsam");
        }
    }
    stop = false;
}

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


Aber ich komm nicht weiter die HTML inhalte werden erst bei dem Alert für 5 sekunden Aktualisiert :S

kann mir jemand hier weiterhelfen ?

lg moritz

Sacaldur

Community-Fossil

Beiträge: 2 301

Wohnort: Berlin

Beruf: FIAE

  • Private Nachricht senden

2

13.08.2013, 08:14

Ich bin mir nicht ganz sicher, was du meinst, allerdings solltest du bedenken, dass der Browser die Inhalte der Seite nicht asynchron aktualisiert. Wenn der Browser etwas neues anzeigen soll, dann muss er entweder dazu aufgefordert werden (sofern das möglich ist) oder die Skriptausführung muss unterbrochen sein.

Bei dem Fangen des Events bist du zwar auf einen Unterschied zwischen IE und anderen Browsern eingegangen, verwendest aber dennoch document.all. Es scheint zwar in neueren Browsern vorhanden zu sein, aber wäre es nicht doch besser, document.getElementById zu verwenden?
Mal abgesehen davon, dass das Anhängen von Events doch ehre auf andere Art geschehen sollte... (so kann nur eine Funktion gleichzeitig für ein Event angehangen werden)
Und vielleicht wäre es ganz gut, wenn du ein Framework für die Browserunabhängige Entwicklung verwenden würdest. JQuery und Prototype fallen mir da ein.
Und, auch wenn das evtl. eher meine Meinung ist, JavaScript sollte nicht das Design kennen. Es sollte also nicht im JS-Code stehen, welche Farbe unter welchen Umständen verwendet werden soll, sondern nur, welche Klassen.
Spieleentwickler in Berlin? (Thema in diesem Forum)
---

Zitat von »Jonathan_Klein«

Es ist ja keine Schande etwas falsch zu machen, als Programmierer tu ich das täglich, [...].

BlueCobold

Community-Fossil

Beiträge: 10 738

Beruf: Teamleiter Mobile Applikationen & Senior Software Engineer

  • Private Nachricht senden

3

13.08.2013, 08:15

Wie Dein Titel schon sagt, solltest Du dafür einen echten Timer verwenden. Sonst blockiert Deine Funktion durch die Schleife und es kann natürlich nix zu sehen sein.
Teamleiter von Rickety Racquet (ehemals das "Foren-Projekt") und von Marble Theory

Willkommen auf SPPRO, auch dir wird man zu Unity oder zur Unreal-Engine raten, ganz bestimmt.[/Sarkasmus]

moritz31

Treue Seele

  • »moritz31« ist der Autor dieses Themas

Beiträge: 259

Wohnort: Hessen

Beruf: Student

  • Private Nachricht senden

4

13.08.2013, 10:59

also okay das mit dem Id hab ich geändert aber hier nochmal ausführlich was der Script machen soll.

Also bei Druck der Leertaste, soll im Hintergrund ein Timeout zwischen 5-13 Sekunden gesetzt werden, sobald dieses Timeout abgelaufen is soll am Bildschirm ne Uhr im Millimeterbereich hochlaufen, und wenn man erneut die Leertaste drückt soll diese erneut gestoppt werden, also eigentlich so eine Art Reaktionszeitmessung :)

BlueCobold

Community-Fossil

Beiträge: 10 738

Beruf: Teamleiter Mobile Applikationen & Senior Software Engineer

  • Private Nachricht senden

5

13.08.2013, 11:04

Teamleiter von Rickety Racquet (ehemals das "Foren-Projekt") und von Marble Theory

Willkommen auf SPPRO, auch dir wird man zu Unity oder zur Unreal-Engine raten, ganz bestimmt.[/Sarkasmus]

poitroae

Treue Seele

Beiträge: 204

  • Private Nachricht senden

6

13.08.2013, 11:09

Wenn de einen Countdown machen willst, dann kannst du entweder N-timeOuts oder setInterval verwenden.
Online Kopfrechentrainer. Kostenfrei und werbefrei!
King of Math | König der Mathematik!
Metahill
Troubi Entertainment

Werbeanzeige

Ähnliche Themen