JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="width=device-width" name="viewport" />
<title></title>
<link href="img/favicon.png" rel="icon" type="image/png">
<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet">
</head>
<body>
<div class="timer_cover">
<div class="timer"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="js/main.min.js"></script>
</body>
</html>
CSS
.timer_cover {
height: 100%;
width: 100%;
display: block;
text-align: center;
}
.timer {
width: 370px;
height: 80px;
display: inline-block;
pointer-events: none
}
JavaScript
$(function () {
countDown = function () {
var t = Math.round(new Date / 1000),
e = $(".timer").FlipClock({
countdown: !0,
callbacks: {
init: function () {
if (!$.cookie("endDate")) {
var t = Date.now() + 10000;
$.cookie("endDate", Math.round(t / 1e3))
}
},
destroy: function() {
var t = Date.now() + 10000;
$.cookie("endDate", Math.round(t / 1e3))
},
start: function() {
var t = Date.now() + 10000;
$.cookie("endDate", Math.round(t / 1e3))
},
interval: function () {
Math.round(new Date / 1e3), e.getTime().time
},
stop: function () {
$.removeCookie("endDate"), countDown()
}
}
});
n = $.cookie("endDate") - t;
if (n <= 0) n = 10 + (n % 10)
e.setTime(n);
e.setCountdown(!0);
e.start()
}, countDown()
});