Готовый блок для вставки в любой лендинг. Так он выглядит вживую:
Это всё, что нужно — стили не трогает, отдельные файлы не требуются. Вставьте перед закрывающим тегом </body> лендинга (или в HTML-блок Tilda).
<!-- MoneyFest: дата и время вебинара --> <script> (function(){ 'use strict'; var M=['января','февраля','марта','апреля','мая','июня','июля','августа','сентября','октября','ноября','декабря']; var FROM=770, TILL=1130; // 12:50 и 18:50 в минутах function compute(now){ now=now||new Date(); var mins=now.getHours()*60+now.getMinutes(), time; var d=new Date(now.getFullYear(),now.getMonth(),now.getDate()); if(mins>=FROM && mins<TILL){ time='19:00'; } // 12:50–18:50 → 19:00, сегодня else if(mins>=TILL){ time='13:00'; d.setDate(d.getDate()+1); } // 18:50–00:00 → 13:00, завтра else{ time='13:00'; } // 00:00–12:50 → 13:00, сегодня var date=d.getDate()+' '+M[d.getMonth()]; return { time:time, date:date, full:'Онлайн эфир начнётся в '+time+' '+date }; } function fill(el,x){ var mode=el.getAttribute('data-webinar'), tpl=el.getAttribute('data-webinar-template'), t; if(tpl){ t=tpl.replace(/\{time\}/g,x.time).replace(/\{date\}/g,x.date); } else if(mode==='time'){ t=x.time; } else if(mode==='date'){ t=x.date; } else{ t=x.full; } if(el.textContent!==t) el.textContent=t; } function render(){ var x=compute(), n=document.querySelectorAll('[data-webinar]'); for(var i=0;i<n.length;i++) fill(n[i],x); return x; } window.MoneyFestWebinar={ get:compute, render:render }; function init(){ render(); setInterval(render,60000); } // обновление раз в минуту if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',init); else init(); })(); </script>
Скрипт сам найдёт эти элементы и подставит текст. Используйте строчный тег (<span>, <b>), чтобы он встал прямо в строку.
<!-- готовая фраза целиком --> <span data-webinar></span> <!-- только время / только дата --> Эфир в <b data-webinar="time"></b> <span data-webinar="date"></span> <!-- своя фраза с подстановкой {time} и {date} --> <span data-webinar data-webinar-template="Старт в {time}, уже {date}"></span>
data-webinar внутрь вашего блока (заголовка, кнопки) — наследуются ваши шрифт и цвет.<span data-webinar>Скоро эфир</span>) — она заменится после загрузки, без «скачка» высоты.19:00, дата — сегодня13:00, дата — завтра13:00, дата — сегодняДата и время считаются по локальному времени браузера посетителя. Полную проверку логики смотрите в файле webinar-datetime-test.html.