라이브 타이머 요소

잘 구성된 시각을 표시하는 <time-formatted> 요소가 이미 있습니다.

현재 시간을 표기하기 위해 <live-timer>요소를 작성하세요.

내부적으로 <time-formatted>를 사용해야 하며 <time-formatted>의 기능을 똑같이 사용하지 않아야 합니다.
매초 tick을 업데이트하십시오.
모든 tick에 대해 event.detail에 현재 날짜와 함께 tick이라는 이름을 가진 사용자 정의 이벤트가 생성되어야 합니다(챕터 커스텀 이벤트 디스패치 참조).

사용법:

          <live-timer id="elem"></live-timer>

<script>
  elem.addEventListener('tick', event => console.log(event.detail));
</script>
        

데모:

두 가지 참고 사항이 있습니다.

요소가 문서에서 제거되면 setInterval 타이머도 지웁니다. 그러지 않으면 더 필요하지 않더라도 계속 tick 하므로 타이머를 지우는 것은 중요합니다. 그리고 setInterval 타이머를 지우지 않으면 브라우저는 요소의 메모리와 요소에 의해 참조된 메모리를 지우고 참조할 수 없습니다.
현재 날짜는 elem.date 프로퍼티로 접근할 수 있습니다. 당연히 모든 클래스 메서드와 프로퍼티는 요소 메서드와 프로퍼티입니다.