JSFiddle - React, Tailwind, and code Playground

by ilyautkin

HTML

<div id="digits"><img class="digit" src="http://img-fotki.yandex.ru/get/6435/58581001.7b/0_a36a7_7ae020c_XXXL.jpg" id="digit-1" />
<img class="digit" src="http://img-fotki.yandex.ru/get/4128/58581001.7b/0_a36a8_b6153630_XXXL.jpg" id="digit-2" />
<img class="digit" src="http://img-fotki.yandex.ru/get/3711/58581001.7b/0_a36aa_2de4776b_XXXL.jpg" id="digit-3" />
<img class="digit" src="http://img-fotki.yandex.ru/get/5632/58581001.7b/0_a36ad_69ad5d6d_XXXL.jpg" id="digit-4" />
<img class="digit" src="http://img-fotki.yandex.ru/get/6424/58581001.7b/0_a36af_9b4f4492_XXXL.jpg" id="digit-5" />
<img class="digit" src="http://img-fotki.yandex.ru/get/4127/58581001.7b/0_a36b1_20cb8689_XXXL.jpg" id="digit-6" />
<img class="digit" src="http://img-fotki.yandex.ru/get/6426/58581001.7b/0_a36b4_25c75c4d_XXXL.jpg" id="digit-7" />
<img class="digit" src="http://img-fotki.yandex.ru/get/4137/58581001.7c/0_a36b7_bac4e70_XXXL.jpg" id="digit-8" />
<img class="digit" src="http://img-fotki.yandex.ru/get/6429/58581001.7c/0_a36b9_530e576d_XXXL.jpg" id="digit-9" />
<img class="digit" src="http://dl1.joxi.net/drive/0003/0430/205230/151120/073660f5f6.png" id="digit-0" />
</div>
<p>До Нового Года осталось <span id="result"></span><span id="days"></span></p>

CSS

.digit {
    width: 100px;
    display: none;
}
#result .digit {
    display: inline;
}

JavaScript

var strdate = '01.01.2016';
var dateAr = strdate.split('.');
var date = new Date(dateAr[2]*1, dateAr[1]*1, dateAr[0]*1, 0, 0, 0, 0);
var now = new Date();
var remains;
if((date - now) <= 0) {
    remains = '0';
} else {
    remains = Math.ceil((date - now) / (24 * 3600 * 1000)) + '';
}
var digit;
var titles = ['день', 'дня', 'дней'];
for(var i = 0; i < remains.length; i++) {
    $('#result').append($('#digit-' + remains[i]).clone());
    if (i == remains.length - 1) {
        $('#days').html(declOfNum(remains, titles));
    }
}
function declOfNum(number, titles) {  
    var cases = [2, 0, 1, 1, 1, 2];
    var variant = 3;
    if (number % 100 > 4 && number % 100 < 20) {
        variant = 2;
    } else {
        var case_v = 5;
        if (number % 10 < 5) {
            case_v = number % 10;
        }
        variant = cases[case_v];
    }
    return titles[variant];  
}