JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="wrapper" style="margin-top:50px;">

    <div class="clock">
        <!-- Days -->
        <div class="clock_days">
            <div class="bgLayer">
                <canvas id="canvas_days" width="122" height="122">Ваш браузер не поддерживает canvas тег HTML5.</canvas>
                <p class="val">86</p>
                <p class="type_days">День</p>
            </div>
        </div>
        <!-- Days -->
        <!-- Hours -->
        <div class="clock_hours">
            <div class="bgLayer">
                <canvas id="canvas_hours" width="122" height="122">Ваш браузер не поддерживает canvas тег HTML5.</canvas>
                <p class="val">11</p>
                <p class="type_hours">Час</p>
            </div>
        </div>
        <!-- Hours -->
        <!-- Minutes -->
        <div class="clock_minutes">
            <div class="bgLayer">
                <canvas id="canvas_minutes" width="122" height="122">Ваш браузер не поддерживает canvas тег HTML5.</canvas>
                <div class="text">
                    <p class="val">6</p>
                    <p class="type_minutes">Минута</p>
                </div>
            </div>
        </div>
        <!-- Minutes -->
        <!-- Seconds -->
        <div class="clock_seconds">
            <div class="bgLayer">
                <canvas id="canvas_seconds" width="122" height="122">Ваш браузер не поддерживает canvas тег HTML5.</canvas>
                <p class="val">51</p>
                <p class="type_seconds">Секунда</p>
            </div>
        </div>
        <!-- Seconds -->
    </div>
</div>

CSS

body {
    margin:0px;
    padding:0px;
    background-color:#68bdda;
}
.wrapper {
    width:770px;
    margin:0 auto;
}
.clock {
    width:535px;
    margin:0 auto;
}
.clock_days {
    float:left;
    width:122px;
    margin-right: 15px;
    position: relative;
}
.clock_hours {
    float:left;
    width:122px;
    margin-right: 15px;
    position: relative;
}
.clock_minutes {
    float:left;
    width:122px;
    margin-right: 15px;
    position: relative;
}
.clock_seconds {
    float:left;
    width:122px;
    position: relative;
}
.bgLayer {
    background-image:url("../img/clock_bg.png");
    width:122px;
    height:122px;
    background-repeat: no-repeat;
}
.val {
    margin:0;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    line-height: 122px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;
    color:#FFF;
    font-weight: bold;
    text-shadow: 1px 1px 1px #5295ac;
    text-align: center;
}
.type_days, .type_hours, .type_minutes, .type_seconds {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color:#FFF;
    background:#64b5d1;
    padding:5px;
    text-align: center;
    margin:0 auto;
    margin-top:10px;
    display: table;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #5295ac;
}

JavaScript

function JBCountDown(settings) {
    var glob = settings;

    function deg(deg) {
        return (Math.PI / 180) * deg - (Math.PI / 180) * 90
    }

    glob.total = Math.floor((glob.endDate - glob.startDate) / 86400);
    glob.days = Math.floor((glob.endDate - glob.now) / 86400);
    glob.hours = 24 - Math.floor(((glob.endDate - glob.now) % 86400) / 3600);
    glob.minutes = 60 - Math.floor((((glob.endDate - glob.now) % 86400) % 3600) / 60);
    glob.seconds = 60 - Math.floor((glob.endDate - glob.now) % 86400 % 3600 % 60);

    if (glob.now >= glob.endDate) {
        return;
    }

    var clock = {
        set: {
            days: function () {
                var cdays = $("#canvas_days").get(0);
                var ctx = cdays.getContext("2d");
                ctx.clearRect(0, 0, cdays.width, cdays.height);
                ctx.beginPath();
                ctx.strokeStyle = glob.daysColor;

                ctx.shadowBlur = 10;
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 0;
                ctx.shadowColor = glob.daysGlow;

                ctx.arc(61, 61, 50, deg(0), deg((360 / glob.total) * (glob.total - glob.days)));
                ctx.lineWidth = 22;
                ctx.stroke();
                $(".clock_days .val").text(glob.days);
            },

            hours: function () {
                var cHr = $("#canvas_hours").get(0);
                var ctx = cHr.getContext("2d");
                ctx.clearRect(0, 0, cHr.width, cHr.height);
                ctx.beginPath();
                ctx.strokeStyle = glob.hoursColor;

                ctx.shadowBlur = 10;
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 0;
                ctx.shadowColor = glob.hoursGlow;

                ctx.arc(61, 61, 50, deg(0), deg(15 * glob.hours));
                ctx.lineWidth = 22;
                ctx.stroke();
                $(".clock_hours .val").text(24 - glob.hours);
            },

            minutes: function ()...