Home > Developer > Web Develop
1.flipclock.js can automatically define the count, the clock's flop effect, call simple, the following simple record the use of
2. Website address: http://www.flipclockjs.com/
3. Call 2 files
<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
<body> <div class= "your-clock" ></div> <!--The class name you want to invoke--< /body>
5.js Call
// two methods of invocation var clock = $ ('. Your-clock '). Flipclock ({ // ... your optionshere}); var New Flipclock ($ ('. Your-clock '), { // ... your optionshere});6.flipclock.css Modifying basic styles
. Flip-clock-wrapper UL ( outer modified width, height, font size, background color, line height ). Flip-clock-wrapper. Flip{outer Shadow}. Flip-clock-wrapper ul Li ( line height ). flip-clock-wrapper ul Li a div ( font size ). flip-clock-wrapper ul Li a div d Iv.inn ( color, text font size, rounded corners, text shadow ). Flip-clock-wrapper ul.play Li.flip-clock-before. up. Shadow{on gradient color}. Flip-clock-wrapper ul.play li.flip-clock-active. Down. Shadow{under Gradient color}* If it is a clock (there are two small dots). Flip-clock-dot.top{Top Dot:Modify width, height, background color, shadow}. Flip-clock-dot.bottom{Bottom Dot:Modify width, height, background color, shadow}* top text. Flip-clock-divider. Flip-clock-label{Common Clock Text}. flip-clock-divider.minutes. Flip-clock-label{minute text}. Flip-clock-divider.seconds. Flip-clock-labell{seconds Text}. Flip-clock-wrapper ul Li a div.up:after{Middle Horizontal Line}
7. Time Display Type (day, hour, minute, 12 hour, 24 hours, count): Clockface:dailycounter | Hourlycounter | Minutecounter | Twelvehourclock | Twentyfourhourclock | Counter
var New Flipclock ($ ('. Your-clock '), { //corresponds to (days, hours, minutes, 12-hour, 24-hour, count) | Hourlycounter | Minutecounter | Twelvehourclock | Twentyfourhourclock | Counter});
//Set clock for time format
var date = new Date (' 2014-01-01 05:02:12 pm ');
Clock = $ ('. Clock '). Flipclock (date, {
Clockface: ' Twentyfourhourclock '
});
8. Universal counting
var clock = $ ('. Clock '). Flipclock, { ' Counter ',
Autostart:false
}); SetTimeout (function() { setinterval(function() { clock.increment () ; // increment (); increase, decrement (); decrease, reset (); reset }, +); });9. Common APIs
var clock = new Flipclock ($ ('). Your-clock '), {// corresponds to (days, hours, minutes, 12-hour, 24-hour, count) Clockface:counter, // count mode a Utostart: false , auto increment countdown: true , //
countdown down minimumdigits:5,
//
set the number of digits
callbacks: {
//callback function
function () {$ ('. Message '). HTML (' The clock has started! '
function () {$ ('. Message '). HTML (' The clock has stopped! '
function clock.increment ();} //destroy | create | init | interval | start | stop | Reset
Update Overwrite recall: Loadclockface method
Originally a clock call, and then a count call
var clock = $ ('. Clock '). Flipclock (100, {
Clockface: ' Hourlycounter '
});
Clock.loadclockface (' Counter ', {
Autostart:true
});
Flipclock.js clock, Count, 3D Flip Plugin
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
