JSFiddle - React, Tailwind, and code Playground

by shelukhin89

HTML

<div class="rfb-upcoming-list__timer-div-1">

</div>

<svg width="176" height="176">
  <circle cx="88" cy="88" r="86" stroke="rgba(9,9,9,0.2)" stroke-width="4" fill="none" />
  <circle cx="88" cy="88" r="86" stroke="#f43f1b" stroke-width="4" fill="none" stroke-dasharray="540px,1000px" style="scale(1,-1) translate(0,-176px)" />
</svg>

JavaScript

// Countdown
		var countDown = function(theSelector, time){
			var output = "";
			var dTime = Date.parse(time);
			var theDate = Date.parse(new Date());
			var difference = dTime - theDate;
			var milliseconds = difference % 1000;
			function addZero(number){
				if(number <= 9){
					number = "0" + number;
				}
				return number;
			}
			x = difference / 1000;
			seconds = addZero(parseInt(x % 60));
			x /= 60;
			minutes = addZero(parseInt(x % 60));
			x /= 60;
			hours = addZero(parseInt(x % 24));
			x /= 24;
			days = addZero(parseInt(x));
			output += "<div><b>" + days + "</b><span>дней</span></div>";
			output += "<div><b>" + hours + "</b><span>часов</span></div>";
			output += "<div><b>" + minutes + "</b><span>минут</span></div>";
			output += "<div><b>" + seconds + "</b><span>секунд</span></div>";
			document.querySelector(theSelector).innerHTML = output;
		}

		var Time_1 = '2020/3/25 14:30:50'; setInterval(function() { countDown('.rfb-upcoming-list__timer-div-1', Time_1) }, 1000);