JSFiddle - React, Tailwind, and code Playground
HTML
<div id="timer"></div>
JavaScript
(function(decl){
decl.rusDeclention = function(single, twin, many, space) {
if (!space) {
space ='';
}
var div10 = this % 10;
var div100 = Math.floor(this / 10) % 10;
var result = many;
if (div100!=1) {
switch (div10) {
case 1:result = single;
break;
case 2:
case 3:
case 4:
result = twin;
break;
default:
break;
}
}
return this.toString() + space + result;
}
})(Number.prototype)
function generateText(difference) {
var days = Math.floor(difference / 86400000);
var hours = Math.floor(difference % 86400000 / 3600000);
var minutes = Math.floor(difference % 3600000 / 60000);
var seconds = Math.floor(difference % 60000 / 1000);
return 'До нового года осталось '
+ (days?days.rusDeclention('день','дня','дней',' ') + ' ':'')
+ (hours?hours.rusDeclention('час','часа','часов',' ') + ' ':'')
+ (minutes?minutes.rusDeclention('минута','минуты','минут',' ') + ' ':'')
+ (seconds?'и ' + seconds.rusDeclention('секунда','секунды','секунд',' '):'');
}
var i=5;
var timer = document.getElementById('timer');
var d=new Date();
var newYear = new Date(d.getFullYear()+1, 0, 1, 0,0,0,0);
var lastdifference = newYear - d;
timer.innerHTML = generateText(lastdifference);
setInterval(function() {
d = new Date;
var difference = newYear - d;
if (lastdifference == difference) return;
lastdifference = difference;
timer.innerHTML = generateText(difference);
},500)