<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script> <h1>Flipclock Timer Customization</h1> <div class="clock" style="margin:2em;"></div> <div class="clock2" style="margin:2em;"></div> <div class="message"></div>

.flip-clock-wrapper ul li a div.down{ border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; } .clock.flip-clock-wrapper ul li a div div.inn{ font-size: 11px !important; line-height: 25px !important; } ul.flip { padding: 0px 10px !important; } .clock.flip-clock-wrapper ul{ width: 15px !important; height: 25px !important; } .clock.flip-clock-wrapper ul li a div.up:after{ top: 12px !important; } .flip-clock-wrapper ul.flip.flip:nth-child(even){ margin: 0px 10px 0px 0px !important; border-radius: 0px 6px 6px 0px !important; } .flip-clock-wrapper ul.flip:nth-child(even) li a div div.inn{ background-color: #ff7c0c !important; border-radius: 0px 6px 6px 0px !important; } .flip-clock-wrapper ul.flip.flip:nth-child(odd){ margin: 0px !important; border-radius: 6px 0px 0px 6px !important; } .flip-clock-wrapper ul.flip:nth-child(odd) li a div div.inn{ background-color: #f39a3f !important; border-radius: 6px 0px 0px 6px !important; }

var clock; $(document).ready(function() { var clock; clock = $('.clock').FlipClock({ clockFace: 'HourlyCounter', autoStart: false, callbacks: { stop: function() { $('.message').html('The clock has stopped!') } } }); clock.setTime(180); clock.setCountdown(true); clock.start(); var clock2; clock2 = $('.clock2').FlipClock({ clockFace: 'HourlyCounter', autoStart: false, callbacks: { stop: function() { $('.message').html('The clock has stopped!') } } }); clock2.setTime(180); clock2.setCountdown(true); clock2.start(); $( "span.flip-clock-divider" ).remove(); });