Виджет даты вебинара — код для вставки

Виджет даты и времени вебинара

Готовый блок для вставки в любой лендинг. Так он выглядит вживую:

Онлайн эфир начнётся…

1Скопируйте этот блок

Это всё, что нужно — стили не трогает, отдельные файлы не требуются. Вставьте перед закрывающим тегом </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>

2Поставьте контейнер, где нужен текст

Скрипт сам найдёт эти элементы и подставит текст. Используйте строчный тег (<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>) — она заменится после загрузки, без «скачка» высоты.

Логика

12:50 — 18:50время 19:00, дата — сегодня
18:50 — 00:00время 13:00, дата — завтра
00:00 — 12:50время 13:00, дата — сегодня

Дата и время считаются по локальному времени браузера посетителя. Полную проверку логики смотрите в файле webinar-datetime-test.html.