JSFiddle - React, Tailwind, and code Playground

by lokdmt

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div class="timer">
  <span class="timer__finalDate">2017/05/14</span><!-- Здесь дата, когда таймер остановится -->
  <ul class="timer__counter"></ul>
</div>

CSS

.timer {
	position: relative;
	text-align: center;
	margin-bottom: 30px;
}

.timer__counter {
	position: relative;
}

.timer__time {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	width: 125px;
	height: 125px;
	text-align: center;
	border: 1px solid red;
	border-radius: 50%;
	margin-right: 50px;
}

.timer__time:last-child {
	margin-right: 0;
}

.timer__wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	line-height: 40px;
	color: green;
}

.timer__wrapper span {
	display: block;
	font-size: 30px;
	line-height: 30px;
}

.timer__end {
	font-size: 50px;
	line-height: 50px;
	color: red;
	margin-top: 40px;
}

.timer__finalDate {
	display: none !important;
}

JavaScript

(function(factory) {
    "use strict";
    if (typeof define === "function" && define.amd) {
        define([ "jquery" ], factory);
    } else {
        factory(jQuery);
    }
})(function($) {
    "use strict";
    var PRECISION = 100;
    var instances = [], matchers = [];
    matchers.push(/^[0-9]*$/.source);
    matchers.push(/([0-9]{1,2}\/){2}[0-9]{4}( [0-9]{1,2}(:[0-9]{2}){2})?/.source);
    matchers.push(/[0-9]{4}([\/\-][0-9]{1,2}){2}( [0-9]{1,2}(:[0-9]{2}){2})?/.source);
    matchers = new RegExp(matchers.join("|"));
    function parseDateString(dateString) {
        if (dateString instanceof Date) {
            return dateString;
        }
        if (String(dateString).match(matchers)) {
            if (String(dateString).match(/^[0-9]*$/)) {
                dateString = Number(dateString);
            }
            if (String(dateString).match(/\-/)) {
                dateString = String(dateString).replace(/\-/g, "/");
            }
            return new Date(dateString);
        } else {
            throw new Error("Couldn't cast `" + dateString + "` to a date object.");
        }
    }
    var DIRECTIVE_KEY_MAP = {
        Y: "years",
        m: "months",
        w: "weeks",
        d: "days",
        D: "totalDays",
        H: "hours",
        M: "minutes",
        S: "seconds"
    };
    function strftime(offsetObject) {
        return function(format) {
            var directives = format.match(/%(-|!)?[A-Z]{1}(:[^;]+;)?/gi);
            if (directives) {
                for (var i = 0, len = directives.length; i < len; ++i) {
                    var directive = directives[i].match(/%(-|!)?([a-zA-Z]{1})(:[^;]+;)?/), regexp = new RegExp(directive[0]), modifier = directive[1] || "", plural = directive[3] || "", value = null;
                    directive = directive[2];
                    if (DIRECTIVE_KEY_MAP.hasOwnProperty(directive)) {
                        value = DIRECTIVE_KEY_MAP[directive];
                        value =...