Flipdown, 초단위로

디데이 카운터로 표시하기 좋은 자바스크립트 라이브러리, Flipdown 입니다.

이 예제는 코드를 입력하고 저장만 하면 바로 퍼블리싱 되는 Essepage 에서 테스트해볼 수 있도록 기록합니다.

1. 라이브러리 설치

Flipdown 을 실행할 수 있는 CSS 파일과 Js 파일을 essepage:head 를 이용해 Essepage 에 불러옵니다.

<essepage:head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flipdown.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src/flipdown.min.js"></script>
</essepage:head>

참조 : https://www.jsdelivr.com/package/npm/flipdown

2. Flipdown 코드

<div id="flipdown" class="flipdown"></div>

<script>
  document.addEventListener('afterEssepageUpdate', function(event) {
    var flip = new FlipDown(1699592422, {
      theme: "dark",
    }).start();
  }, {once: true});
</script>

NOTE! Essepage 가 모두 로드된 후에 Flipdown 이 실행되도록 afterEssepageUpdate를 사용합니다. afterEssepageUpdate 안에 코드는 페이지를 이동할 때마다 실행되기 때문에, 반복실행으로 메모리 누수를 막기위해 {once: true}를 추가했습니다.

3. 전체코드

<essepage:head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flipdown.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src/flipdown.min.js"></script>
</essepage:head>

<div id="flipdown" class="flipdown"></div>

<script>
  document.addEventListener('afterEssepageUpdate', function(event) {
    var flip = new FlipDown(1699592422, {
      theme: "dark",
    }).start();
  }, {once: true});
</script>

참조

• Flipdown : https://github.com/PButcher/Flipdown