JSFiddle - React, Tailwind, and code Playground
HTML
<div class="counter">
<p class="hours"></p>
<p class="в"></p>
<p class="minutes"></p>
<p class="seconds"></p>
<div>
<p>ЧАСЫ</p><p>МИНУТЫ</p><p>СЕКУНДЫ</p>
</div>
</div>
CSS
.counter {
margin: 14px auto 0;
width: 344px;
position: relative;
padding: 10px;
background: #fff;
border-radius: 10px;
}
.counter > p {
display: inline-block;
font: 64px "Times new roman", sans;
background: #ccc;
height: 83px;
width: 98px;
padding: 5px 0 0 13px;
letter-spacing: 24px;
color:#2f2f2f;
margin:0px;
}
.counter > div > p {
display: inline-block;
font-size: 15px;
font-weight: bold;
font: bold 15px Ubuntu, Arial, sans-serif;
padding: 0;
width: 112px;
text-align: center;
margin:0px;
}
JavaScript
function counter(){
var now = new Date();
var finDate = new Date("Mar,27,2019,05:25:00");
var totalRemains = (finDate.getTime() - now.getTime());
if (totalRemains > 1){
var RemainsSec = (parseInt(totalRemains / 1000));
var RemainsFullDays = (parseInt(RemainsSec/(24 * 60 * 60)));
if (RemainsFullDays < 10){
RemainsFullDays = "0" + RemainsFullDays
};
var secInLastDay = RemainsSec-RemainsFullDays * 24 * 3600;
var RemainsFullHours = (parseInt(secInLastDay / 3600));
if (RemainsFullHours < 10){
RemainsFullHours = "0" + RemainsFullHours
};
var secInLastHour = secInLastDay - RemainsFullHours * 3600;
var RemainsMinutes = (parseInt(secInLastHour / 60));
if (RemainsMinutes < 10){
RemainsMinutes = "0" + RemainsMinutes
};
var lastSec = secInLastHour - RemainsMinutes * 60;
if (lastSec < 10){
lastSec = "0" + lastSec
};
// var mcend = Date.parse("Jan 1, 2009, 00:00:00");
// var mcnow = now.getTime();
// var mc = ((mcend - mcnow)/10).toFixed(0).substr(8);
$(".counter .days").html(RemainsFullDays);
$(".counter .hours").html(RemainsFullHours);
$(".counter .minutes").html(RemainsMinutes);
$(".counter .seconds").html(lastSec);
}
else {
$(".counter").html("Время вышло.");
}
};
setInterval(counter, 1000);