这里有一些秒表的代码:https://github.com/Aerodyll/Stopwatch
正如你所看到的,计数器改变了4个标签的html,分别是小时、分钟、秒和毫秒。它与3个按钮联系在一起,开始、停止和清除。
当屏幕上只有一个计数器的时候,这很好用,但是我如何修改这段代码,使它同时为屏幕上的多个计数器工作(它们都独立工作)?当我复制它的时候,它就坏了。我理解为什么它坏了,因为它指向相同的html对象,但是我如何在页面上复制计数器,而不为每个计数器编写一个全新的脚本呢?
(我发现了其他用户这样做的几个例子,但他们的代码对我来说很难理解。
2条答案
按热度按时间vwkv1x7d1#
当屏幕上只有一个计数器时工作正常,但我如何修改此代码以使其同时为屏幕上的多个计数器工作......
1.将HTML元素 Package 到
div
中以创建多个块。如果您想单独针对这些块,则给予此 Package 器id
。或者,如果您想针对所有块,则只需给予相同的class
。1.将整个代码 Package 到一个函数中。这将封装逻辑。
1.使用元素
id
或元素本身调用该函数。1.在函数中获取元素中
span
s的引用。这可以通过class
或nth-child
选择器完成。示例:
nvbavucw2#
如果你想让秒表的多个示例工作,你显然需要更多的开始/停止按钮。你可以用一个参数来调用添加时间的函数,这个参数是按钮id。按钮id会告诉函数要添加时间的秒表。当然,秒表也需要用唯一的id来定义,这样你就可以指向它:)
祝你学习顺利!