FlipClock tweaky blue

by ian_smithz

HTML

<script src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.js"></script>
<br/><div class="clock"></div>

CSS

/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-clock-wrapper a {
  cursor: pointer;
  text-decoration: none;
  color: #ccc; }

.flip-clock-wrapper a:hover {
  color: #fff; }

.flip-clock-wrapper ul {
  list-style: none; }

.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
  content: " ";
  display: table; }

.flip-clock-wrapper.clearfix:after {
  clear: both; }

.flip-clock-wrapper.clearfix {
  *zoom: 1; }

/* Main */
.flip-clock-wrapper {
  font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
  -webkit-user-select: none; }

.flip-clock-meridium {
  background: none !important;
  box-shadow: 0 0 0 !important;
  font-size: 36px !important; }

.flip-clock-meridium a { color: #313333; }

.flip-clock-wrapper {
  text-align: center;
  position: relative;
  width: 100%;
  margin: 1em;
}

.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.flip-clock-wrapper:after {
    clear: both;
}

/* Skeleton */
.flip-clock-wrapper ul {
  position: relative;
  float: left;
  margin: 5px;
  width: 60px;
  height: 90px;
  font-size: 80px;
  font-weight: bold;
  line-height: 87px;
  border-radius: 6px;
  background: #000;
}

.flip-clock-wrapper ul li {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-decoration: none !important;
}

.flip-clock-wrapper ul li:first-child {
  z-index: 2; }

.flip-clock-wrapper ul li a {
  display: block;
  height: 100%;
  -webkit-perspective: 200px;
  -moz-perspective: 200px;
  perspective: 200px;
  margin: 0 !important;
  overflow:...

JavaScript

var date  = new Date(Date.UTC(2018, 9, 11, 13, 51, 20, 0)), now   = new Date(), diff = date.getTime()/1000 - now.getTime()/1000,
    aDayInSecs=24*60*60, anHourInSecs=60*60, aMinuteInSecs=60;

if (diff<0) diff=200; // remove when happy

var clock = $('.clock').FlipClock(diff, {
    clockFace: 'DailyCounter',
    countdown: true,
    callbacks: {
        interval: function () {
            var time = clock.getTime().time;
            if (time < aDayInSecs) {
              var $days = $("span.days").nextUntil("span").andSelf();
              if ($days.length>0) $days.remove();  
            }
            if (time < anHourInSecs) {
              var $hours = $("span.hours").nextUntil("span").andSelf();
              if ($hours.length>0) $hours.remove();  
            }
            if (time < aMinuteInSecs) {
              var $min = $("span.minutes").nextUntil("span").andSelf();
              if ($min.length>0) $min.remove();  
            }
            if (time <= 1) {
              var $sec = $("span.seconds").next("ul").andSelf();
              if ($sec.length>0) $sec.remove(); 
              $(".clock").html("DONE");  
            }
        }
    }    
    
});