본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. 프로젝트 페이지에 방문하셔서 번역을 도와주세요.
구매EPUB/PDF
튜토리얼 지도
돌아가기

라이브 타이머 요소

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

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

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

사용법:

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

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

데모:

샌드박스를 열어 정답을 작성해보세요.

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

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

샌드박스를 열어 정답을 확인해보세요.