计时器元素实例
我们已经创建了 <time-formatted>
元素用于展示格式化好的时间。
创建一个 <live-timer>
元素用于展示当前时间:
- 这个元素应该在内部使用
<time-formatted>
,不要重复实现这个元素的功能。 - 每秒钟更新。
- 每一秒钟都应该有一个自定义事件
tick
被生成,这个事件的event.detail
属性带有当前日期。(参考章节 创建自定义事件 )。
使用方式:
<live-timer id="elem"></live-timer>
<script>
elem.addEventListener('tick', event => console.log(event.detail));
</script>
例子:
请注意:
- 在元素被从文档移除的时候,我们会清除
setInterval
的 timer。这非常重要,否则即使我们不再需要它了,它仍然会继续计时。这样浏览器就不能清除这个元素占用和被这个元素引用的内存了。 - 我们可以通过
elem.date
属性得到当前时间。类所有的方法和属性天生就是元素的方法和属性。