2016-04-22 50 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