A persistent countdown using the current date and a future date written as a time stamp.
A Pen by Taryn Stark on CodePen.
.clock |
A persistent countdown using the current date and a future date written as a time stamp.
A Pen by Taryn Stark on CodePen.
$(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) | |
} | |
} | |
}); | |
}); |
<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> |
.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; | |
} | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet" /> |