CSS3 Target Selector Ausgabe

Question

Ich lehre mich JS/HTML5/CSS3 durch Studium, Kombination und Modifikation von 3 Codebeispielen von 3 verschiedenen Autoren. Meine Arbeits Pen (die Verweise auf die Original-Autoren enthalten) kann hier

http://codepen.io/Widgeteria/pen/jqpyYb

Meine Frage gefunden werden, wie mache ich das Zeitelement unsichtbar in der schmalen blauen vertikalen Task-Clock-Partition oder Abschnitt (nach dem Start stoppen Sie die Überwachung, indem Sie auf die Schaltfläche Start klicken), wenn Sie auf die Dropzone- oder Notes-Partitionen klicken.

Ich habe verschiedene Möglichkeiten (einschließlich eingebetteter CSS-Regeln) ausprobiert, kann aber die schwachen Ziffern nicht aus der vertikalen Sektion entfernen, nachdem ich auf einen anderen Abschnitt geklickt habe.

Hier ist, wie die Uhr eingerichtet ist:

<h1><time>00:00:00</time></h1> 
<button id="start">start</button> 
<button id="stop">stop</button> 
<button id="clear">clear</button> 

Ich versuche, den <time> Tag unsichtbar, wenn das Ziel zu machen: Verschiebungen zu einem anderen Abschnitt als Task-Uhr, und wieder sichtbar, wenn ich zurück klicken .

Das zweite Problem, das ich habe, versucht, die JS so zu ändern, dass die Uhr nicht weiter läuft, wenn ich zweimal auf die Schaltfläche Start klicke.

Irgendwelche Ideen auf, wie man jedes Problem löst, würde sehr geschätzt.

Answer 1

Für die CSS Teil, sollten Sie diese

:target time { 
    visibility: hidden; 
} 

ändern und diese

,time { 
    visibility: visible; 
} 

dies:

:target #time { 
    visibility: hidden; 
} 

und dieses

#time { 
    visibility: visible; 
} 

Fügen Sie außerdem einen id="time" auf dem <h1>-Tag mit dem Tag <time> hinzu.
Das Problem war die :target Sache. Es funktioniert nur mit IDs, nicht mit Tags per-se.

Für den Teil Javascript, können Sie die Timer-Funktion modifizieren:

function timer() { 
if(t) 
    clearTimeout(t); 
t = setTimeout(add, 1000); 
} 

Dies löscht das Timeout, wenn es bereits ausgeführt wird, so dass Sie nicht REFFERENCES verlieren bereits Timeouts initiiert und Sie werden auch nicht haben parallele Timeouts laufen.

Haben Sie einen guten.