javascript - CSS3 目标选择器问题

Question

我正在通过研究、组合和修改 3 位不同作者的 3 个代码示例来自学 JS/HTML5/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，以便在我单击“开始”按钮两次时时钟不会继续运行。

任何关于如何解决这两个问题的想法都将不胜感激。

Answer 1

对于CSS部分，你应该改变这个

:target time {
  visibility: hidden;
}

还有这个

,time {
  visibility: visible;
}

为此:

:target #time {
  visibility: hidden;
}

还有这个

#time {
  visibility: visible;
}

此外，添加一个 id="time"在 <h1> 上包含 <time> 的标签标签。
问题是 :target事物。它仅适用于 id，不适用于标签本身。

对于 Javascript 部分，您可以将计时器函数修改为:

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

如果它已经运行，这将清除超时，因此您不会丢失对已启动超时的引用，也不会运行并行超时。

祝你好运。