Question

我通过研究，组合和修改3个不同作者的3个代码示例来自学JS / HTML5 / CSS3。我的工作笔（包括对原作者的引用）可以在这里找到

我的问题是当你点击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);
}

如果超时已经运行，则会清除超时，因此您不会丢失对已经启动的超时的响应，也不会运行并行超时。

有一个好的。