2016-04-22 37 views
0

通過研究,組合和修改3個不同作者的3個代碼示例,我正在自學JS/HTML5/CSS3。我的工作鋼筆(包括原來的作者引用)都可以在這裏CSS3目標選擇器問題

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

發現我的問題是我怎麼做的時間元素在狹窄的藍色垂直任務時鐘分區或部分不可見(啓動後單擊開始按鈕時停止監視)單擊到Dropzone或Notes分區。

我嘗試了各種方式(包括嵌入的CSS規則),但不能使淡淡的時鐘數字從垂直部分框中消失後,我點擊另一個部分。

這裏是時鐘的設置方式:

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

我試圖讓<time>標籤不可見,在目標時:轉移到比工作時鐘等,並可見一節當我再次單擊後退。

我遇到的第二個問題是試圖修改JS,以便時鐘不會繼續運行,如果我點擊兩次開始按鈕。

任何想法如何解決任何問題將不勝感激。

回答

0

對於CSS的一部分,你應該改變這種

:target time { 
    visibility: hidden; 
} 

,time { 
    visibility: visible; 
} 

這樣:

:target #time { 
    visibility: hidden; 
} 

#time { 
    visibility: visible; 
} 

另外,在包含<time>標記的<h1>標記上添加一個id="time"
問題是:target的事情。它只能與ids一起使用,不能與標籤本身一起使用。

對於JavaScript部分,你可以modifiy定時器功能:

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

這將清除超時,如果它已經運行,這樣你就不會失去參考文獻的已經啓動的超時,你也不會有並行超時運行。

有一個很好的。

+0

完美。謝謝。解決問題#2 – cataloupe

+0

更新爲css的東西:) –

+0

對不起,我在哪裏可以找到css修復? – cataloupe