[javascript] Raphaël을 사용하여 웹 페이지에 카운트다운 타이머를 추가하는 방법은 어떻게 되나요?

29 Nov 2023

javascript

Raphaël은 JavaScript로 작성된 벡터 그래픽 라이브러리로, 웹 페이지에 카운트다운 타이머를 추가하는 데 사용될 수 있습니다. 아래는 Raphaël을 사용하여 웹 페이지에 카운트다운 타이머를 추가하는 예시 코드입니다.

먼저, Raphaël 라이브러리를 웹 페이지에 포함시키는 스크립트 태그를 추가해주세요.

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>

그리고, 아래의 JavaScript 코드를 사용하여 카운트다운 타이머를 추가할 수 있습니다.

// 카운트다운 타이머의 영역을 지정할 div 요소를 선택합니다.
var timerDiv = document.getElementById("timer");

// 카운트다운 시간을 설정합니다. (초 단위)
var countdownTime = 60;

// Raphaël을 사용하여 타이머를 그립니다.
var paper = Raphael(timerDiv, 200, 200);
var timerArc = paper.path().attr({
  stroke: "#f00",
  "stroke-width": 10,
  arc: [100, 100, 80, -90, -90]
});

// 타이머 업데이트 함수를 정의합니다.
function updateTimer() {
  // 남은 시간을 계산합니다.
  var remainingTime = Math.max(0, countdownTime - 1);

  // 타이머를 업데이트합니다.
  timerArc.animate({ arc: [100, 100, 80, -90, -90 + (360 * countdownTime / 60)] }, 500, "linear");

  // 카운트다운 시간을 갱신합니다.
  countdownTime--;

  // 타이머가 종료될 때까지 재귀적으로 타이머를 업데이트합니다.
  if (remainingTime > 0) {
    setTimeout(updateTimer, 1000);
  }
}

// 타이머를 시작합니다.
updateTimer();

위의 코드에서, timerDiv 변수는 카운트다운 타이머의 영역이 될 div 요소를 선택합니다. countdownTime 변수는 카운트다운할 시간을 초 단위로 설정합니다. paper 변수는 Raphaël로 그린 그래픽을 포함할 캔버스를 생성합니다. timerArc 변수는 타이머의 동그라미 부분을 나타내기 위한 Raphaël 경로 객체를 생성합니다.

updateTimer 함수는 타이머를 업데이트하는 역할을 합니다. 남은 시간을 계산하고, 카운트다운 타이머를 업데이트하며, 남은 시간이 0보다 큰 경우에는 1초마다 재귀적으로 자신을 호출하여 타이머를 업데이트합니다.

카운트다운 타이머를 추가하려는 웹 페이지에 위의 코드를 적용하면, 지정한 div 영역에 카운트다운 타이머가 표시될 것입니다.