Відлік часу до вказаної подіїї

Шляхом Альбірео

Новини•Записи•JS•Відлік часу до вказаної подіїї

2021.09.28

Лічильник, який рахує час в прямому і зворотньому напрямках.

Скрипт, що рахує час від позначеної дати, або залишок до майбутньої встановленої дати. Стилізується за допомоги параметрів через конфігурацію. Автором є Robert Hashemian, всі можливості скрипта описані на сторінці автора. В прикладі параматри встановлені на відлик часу від дати написання статті, але достатньо встановити інші параметри TargetDate та CountStepper, щоби змінити напрямок рахунку.

<!-- Встановлення попередніх параметрів і стилізація -->

<script>
	TargetDate = "2021-09-28T05:00:00";
	BackColor = "transparent";
	ForeColor = "navy";
	CountActive = true;
	CountStepper = +1;
	LeadingZero = true;
	DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
	FinishMessage = "It is finally here!";
</script>

Скрипт запущений 2021.09.28, вже пройшло:

Відобразити результат можна будь-яким чином, додавши стилі за смаком. Якщо в параметрі TargetDate встановити майбутню дату, та змінити значення CountStepper = -1;, то час буде рахуватися до досягнення вказаної дати (Новий Рік, День Народження тощо).

<!-- Функції відліку часу -->

<script>
	function calcage(secs, num1, num2) {
	  s = ((Math.floor(secs/num1))%num2).toString();
	  if (LeadingZero && s.length < 2)
		s = "0" + s;
	  return "<b>" + s + "</b>";
	}

	function CountBack(secs) {
	  if (secs < 0) {
		document.getElementById("cntdwn").innerHTML = FinishMessage;
		return;
	  }
	  DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
	  DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
	  DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
	  DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

	  document.getElementById("cntdwn").innerHTML = DisplayStr;
	  if (CountActive)
		setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
	}

	function putspan(backcolor, forecolor) {
	 document.write("<span id='cntdwn' style='background-color:" + backcolor + 
					"; color:" + forecolor + "'></span>");
	}

	if (typeof(BackColor)=="undefined")
	  BackColor = "white";
	if (typeof(ForeColor)=="undefined")
	  ForeColor= "black";
	if (typeof(TargetDate)=="undefined")
	  TargetDate = "12/31/2020 5:00 AM";
	if (typeof(DisplayFormat)=="undefined")
	  DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
	if (typeof(CountActive)=="undefined")
	  CountActive = true;
	if (typeof(FinishMessage)=="undefined")
	  FinishMessage = "";
	if (typeof(CountStepper)!="number")
	  CountStepper = -1;
	if (typeof(LeadingZero)=="undefined")
	  LeadingZero = true;

	CountStepper = Math.ceil(CountStepper);
	if (CountStepper == 0)
	  CountActive = false;
	var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
	putspan(BackColor, ForeColor);
	var dthen = new Date(TargetDate);
	var dnow = new Date();
	if(CountStepper>0)
	  ddiff = new Date(dnow-dthen);
	else
	  ddiff = new Date(dthen-dnow);
	gsecs = Math.floor(ddiff.valueOf()/1000);
	CountBack(gsecs);
</script>

P.S. На нашу думку, всі елементи в скриптах, які стосуються стилізації, можна видалити і користуватися зовнішніми стилями CSS.