FlipClock. js 시계, 계수, 3D 반전 플러그 인

1. FlipClock. js 는 자동 으로 계수, 시계의 카드 뒤 집기 효 과 를 정의 할 수 있 습 니 다. 호출 이 간단 합 니 다. 아래 에 사용 방법 을 간단하게 기록 하 겠 습 니 다.
2. 홈 페이지 주소:http://www.flipclockjs.com/
3. 파일 2 개 호출

<link href="/assets/css/flipclock.css" rel="stylesheet" type="text/css"> 
<script src="/assets/js/flipclock/flipclock.min.js" type="text/javascript:;"></script>

4.HTML

        
your-clock">
  

5. js 호출

//      
var clock = $('.your-clock').FlipClock({
    // ... your options here
});

var clock = new FlipClock($('.your-clock'), {
    // ... your options here
});

6. flipclock. css 기본 스타일 수정

.flip-clock-wrapper ul(      ，  ，    ，    ，  )
.flip-clock-wrapper .flip{
         }
.flip-clock-wrapper ul li(  )
.flip-clock-wrapper ul li a div(    )
.flip-clock-wrapper ul li a div div.inn(  ,      ,  ,    )
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow{
          }
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow{
          }
*     (      )
.flip-clock-dot.top{
        :    ，  ，    ，  }
.flip-clock-dot.bottom{
        :    ，  ，    ，  }
*    
.flip-clock-divider .flip-clock-label{
           }
.flip-clock-divider.minutes .flip-clock-label{
         }
.flip-clock-divider.seconds .flip-clock-labell{
         }
.flip-clock-wrapper ul li a div.up:after{
         }

7. 시간 표시 유형 (일, 시, 분, 12 시간 제, 24 시간 제, 계수): clockFace: DailyCounter | HourlyCounter | MinuteCounter | TwelveHourClock | TwentyFourHourClock | Counter
 

var clock = new FlipClock($('.your-clock'), {　　//    ( , , ,12   ,24   ,  )
    clockFace : DailyCounter | HourlyCounter | MinuteCounter | TwelveHourClock | TwentyFourHourClock | Counter
});

  //시간 형식의 시계 var date = new Date ('2014 - 01 - 01 05: 02: 12 pm') 를 설정 합 니 다.      clock = $('.clock').FlipClock(date, {       clockFace: 'TwentyFourHourClock'  });

8. 통용 계수

var clock = $('.clock').FlipClock(100, {
        clockFace: 'Counter',
　　　　 autoStart : false

    });

    setTimeout(function() {
        setInterval(function() {
            clock.increment();          //increment();  ,decrement();  ,reset();  
        }, 1000);
    });

9. 상용 API

var clock = new FlipClock($('.your-clock'), {　　//    ( , , ,12   ,24   ,  )
    clockFace :  Counter,     //    
    autoStart: false,         //    
    countdown: true,          //     
    minimumDigits : 5,        //    
    callbacks: {              //    

        start: function() { $('.message').html('The clock has started!'); }, 
        stop: function() { $('.message').html('The clock has stopped!'); }, 
        interval: function() { clock.increment(); }  //destroy | create | init | interval | start | stop | reset 

    } 
}); 

//         : loadClockFace  

  //원래 시계 호출 이 었 으 나 계수 호출 으로 바 뀌 었 다.  var clock = $('.clock').FlipClock(100, {       clockFace: 'HourlyCounter'  });
  clock.loadClockFace('Counter', {      autoStart: true  });

 
다음으로 전송:https://www.cnblogs.com/alantao/p/5563318.html