Persistent Countdown FlipClock.js

index.pug

.clock

persistent-countdown-flipclock-js.markdown

Persistent Countdown FlipClock.js

A persistent countdown using the current date and a future date written as a time stamp.

A Pen by Taryn Stark on CodePen.

License.

script.js

$(document).ready(function() {
  var dateTarget = new Date('2020.03.05').getTime();
  var dateNow = Date.now();
  var daysLeft = (dateTarget - dateNow)/1000;
  var clock = $('.clock').FlipClock(daysLeft, {
		clockFace: 'DailyCounter',
		countdown: true,
    interval: 4000,
    callbacks: {
      interval: function() {
        this.factory.setTime(this.factory.getTime().time-2)
      }
    }
	});
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>

style.scss

.flip-clock-wrapper {
  margin: 0;
  display: inline-block;
  width: initial;
  left: 50%;
  transform: translatex(-50%);
}

.flip-clock-divider .flip-clock-label {
  top: 105%;
  text-transform: uppercase;
  font-size: 1.2em;
}

.flip-clock-divider.hours .flip-clock-label {
  right: -90px;
}

.flip-clock-divider.minutes .flip-clock-label {
  right: -98px;
}

.flip-clock-divider.seconds .flip-clock-label {
  right: -102px;
}

@media (max-width: 480px) {
  .minutes, .minutes + .flip, .minutes + .flip + .flip {
    display: none;
  }
}
@media (max-width: 645px) {
  .seconds, .seconds + .flip, .seconds + .flip + .flip {
    display: none;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet" />