Count UP를 구현하려면 하나의 라이브러리가 필요하다.
특정 숫자 예를 들자면 0 ~ 1,000 까지 순차적으로 카운트가 올라가게 하는 라이브러리이다.
github 주소 -> https://github.com/inorganik/CountUp.js
시작 카운트, 종료 카운트, 소수점, 시작 ~ 종료 실행시간 및 여러 설정 등이 가능하다.
기본 코드는 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="countUp.min.js"></script>
</head>
<body>
<div id="myTargetElement">0</div>
<button onclick="onStart();">시작</button>
<button onclick="onPauseResume();">일시정지</button>
<button onclick="onReset();">초기화</button>
<script type="text/javascript">
var options = {
useEasing : true,
useGrouping : true,
separator : ',',
decimal : '.',
prefix : '',
suffix : ''
};
/**
[0] 카운트를 보여줄 ID
[1] 시작 카운트
[2] 종료 카운트
[3] 소수점
[4] 시작 ~ 종료 까지 실행 시간
[5] 옵션
*/
var demo = new CountUp("myTargetElement", 0, 3000, 0, 2.5, options);
// 시작
function onStart() {
demo.start();
}
// 일시정지 / 재시작
function onPauseResume() {
demo.pauseResume();
}
// 초기화
function onReset() {
demo.reset();
}
</script>
</body>
</html>
간단한 Demo를 만들어보았다.
0 ~ 3,000 까지 소주점없이 2.5초에 완료 되도록 하였다.
시작, 일시정지, 초기화 버튼을 구현하였다.
붉은 코드를 추가후에 (위의 주소에서 다운 받을 수 있다.) 나머지 코드를 추가하면 된다.
이를 이용하여 여러가지 용도로 사용 할 수 있을 듯 하다.
※ Demo Code 첨부
CountUP.zip'JavaScript' 카테고리의 다른 글
| 주민등록번호 체크 (0) | 2016.01.15 |
|---|---|
| 날짜 체크 하기 (0) | 2015.12.15 |
| Swipe 배너 만들기 (0) | 2015.12.14 |
| userAgent 정보 가져오기 (0) | 2015.12.11 |
| Callback Function (0) | 2015.12.04 |
