[해피CGI][cgimall] jQuery 카운트다운 타이머 플러그인

jQuery 카운트다운 타이머 플러그인은 일, 시, 분, 초를 표현할 수 있습니다. 

링 형태의 카운트다운 표시기를 제공 합니다.
라이센스는 MIT 입니다.



# 사용방법 안내 


1. 페이지의 끝에 자바스크립트 추가 해주세요.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript" src="js/kinetic.js"></script>

<script type="text/javascript" src="../jquery.final-countdown.js"></script>

2. head 에 css 를 추가 해 주세요.

<link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="css/demo.css">

3. body 에 타이머 구조를 추가해 주세요.

<div class="countdown countdown-container container">

    <div class="clock row">

        <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">

            <div class="wrap">

                <div class="inner">

                    <div id="canvas-days" class="clock-canvas"></div>

                    <div class="text">

                        <p class="val">0</p>

                        <p class="type-days type-time">DAYS</p>

                    </div><!-- /.text -->

                </div><!-- /.inner -->

            </div><!-- /.wrap -->

        </div><!-- /.clock-item -->

        <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">

            <div class="wrap">

                <div class="inner">

                    <div id="canvas-hours" class="clock-canvas"></div>

                    <div class="text">

                        <p class="val">0</p>

                        <p class="type-hours type-time">HOURS</p>

                    </div><!-- /.text -->

                </div><!-- /.inner -->

            </div><!-- /.wrap -->

        </div><!-- /.clock-item -->

        <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">

            <div class="wrap">

                <div class="inner">

                    <div id="canvas-minutes" class="clock-canvas"></div>

                    <div class="text">

                        <p class="val">0</p>

                        <p class="type-minutes type-time">MINUTES</p>

                    </div><!-- /.text -->

                </div><!-- /.inner -->

            </div><!-- /.wrap -->

        </div><!-- /.clock-item -->

        <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">

            <div class="wrap">

                <div class="inner">

                    <div id="canvas-seconds" class="clock-canvas"></div>

                    <div class="text">

                        <p class="val">0</p>

                        <p class="type-seconds type-time">SECONDS</p>

                    </div><!-- /.text -->

                </div><!-- /.inner -->

            </div><!-- /.wrap -->

        </div><!-- /.clock-item -->

    </div><!-- /.clock -->

</div><!-- /.countdown-wrapper -->

4. 타이머를 실행하는 script 를 추가 해 주세요. 
   1번에서 추가한 js 아래에 추가 합니다. 

<script type="text/javascript">  

    $('document').ready(function() {

        'use strict';

       

        $('.countdown').final_countdown({

            'start': 1362139200,

            'end': 1388461320,

            'now': 1387461319        

        });

    });

</script>