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

29 Nov 2023

javascript

Raphaël은 JavaScript 기반의 벡터 그래픽 라이브러리입니다. 해당 라이브러리를 사용하여 웹 페이지에 타이머를 추가하는 방법을 알려드리겠습니다.

먼저, Raphaël 라이브러리를 웹 페이지에 추가합니다. HTML 파일의 <head> 섹션에서 다음 코드를 추가해주세요:

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

그 후, 타이머를 추가할 엘리먼트를 생성하고 스케일링을 위한 div 요소를 작성합니다. 이 예시에서는 id가 timer인 div 요소를 사용하겠습니다.

<div id="timer"></div>

이제 JavaScript 코드에서 Raphaël을 사용하여 타이머를 생성합니다.

var paper = Raphael("timer", 200, 200); // div 요소의 id를 지정하여 Raphaël paper를 생성합니다.

var circle = paper.circle(100, 100, 80); // 중심 좌표와 반지름을 설정하여 원을 생성합니다.
circle.attr("fill", "red"); // 원의 채우기 색상을 설정합니다.

var text = paper.text(100, 100, "60"); // 중심 좌표와 텍스트를 설정하여 텍스트 오브젝트를 생성합니다.
text.attr("font-size", 32); // 텍스트 크기를 설정합니다.
text.attr("fill", "white"); // 텍스트의 색상을 설정합니다.
text.attr("font-weight", "bold"); // 텍스트의 굵기를 설정합니다.

var angle = 0; // 초기 각도를 0도로 설정합니다.
var timeLeft = 60; // 남은 시간을 60초로 설정합니다.

function updateTimer() {
  angle += (360 / 60); // 초당 회전 각도를 계산합니다.
  circle.animate({ transform: 'r' + angle }, 1000); // 원을 회전시킵니다.
  
  timeLeft--; // 남은 시간을 1초씩 감소시킵니다.
  text.attr("text", timeLeft); // 텍스트를 업데이트합니다.
  
  if (timeLeft <= 0) {
    clearInterval(timerInterval); // 타이머를 멈춥니다.
    alert("타이머가 종료되었습니다.");
  }
}

var timerInterval = setInterval(updateTimer, 1000); // 1초마다 타이머를 업데이트합니다.

이제 웹 브라우저에서 해당 웹 페이지를 열면 화면에 원 모양의 타이머가 표시되며, 60초로 카운트 다운됩니다. 타이머가 종료되면 알림 창이 나타납니다.

해당 예시 코드를 기반으로 웹 페이지에서 Raphaël을 사용하여 타이머를 추가할 수 있습니다. 참고로, 코드 내용을 확장하거나 스타일을 변경할 수 있습니다.