■ 동그라미를 그리는 카운트 다운 애니메이션
원이 그려지면서 시간경과를 표기하는 애니메이션 효과가 필요했다.
마침 검색을 통해 위와같은 플러그인을 GITHUB에서 찾았고.
아래와 같이 필자에게 필요한 형태로 수정하게 되었다.
# 소스 코드
<html>
<head>
<title>circletimer</title>
<link href="./css/circletimer.css" rel="stylesheet">
<style type="text/css">
#example-timer {
height:150px;
margin:20px auto;
width:150px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="./js/circletimer.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>
<script type="text/javascript">
jQuery(document).on("ready", function() {
jQuery("#example-timer").circletimer({
onComplete:function() {
alert("시간이 종료되었습니다.");
}
, onUpdate:function(elapsed) {
// 밀리 세컨드 단위를 초단위로 변경
var second = ~~((Math.round(elapsed) - 3000) / 1000) % 60;
// 음수로 처리된 시간(초)를 양수로 전환한다.
jQuery("#time-elapsed").html(Math.abs(second));
}
, timeout : 3000 // 시간은 3초로 지정
, clockwise : true // 시계방향으로 회전
});
// 타이머 시작
jQuery("#start").on("click", function() {
jQuery("#example-timer").circletimer("start");
});
// 타이머 일시 정지
jQuery("#pause").on("click", function() {
jQuery("#example-timer").circletimer("pause");
});
// 타이머 종료
jQuery("#stop").on("click", function() {
jQuery("#example-timer").circletimer("stop");
});
// 타이머 1초 증가
jQuery("#add").on("click", function() {
jQuery("#example-timer").circletimer("add", 1000);
});
})
</script>
</head>
<body>
<div class="example">
<div id="example-timer"></div>
<p>Time Elapsed : <span id="time-elapsed">3</span>초</p>
<button id="start">시작</button>
<button id="pause">정지</button>
<button id="stop">종료</button>
<button id="add">1초 추가</button>
<pre>
</pre>
</div>
</body>
</html> |
# 출력 결과
