Контент
Пример Главного внутреннего баннера со счетчиком обратного отсчета
Если Вам нужен ответ на вопрос: Что такое Главный внутренний баннер, для чего он нужен и как разрешено им пользоваться?
и/или решение задач:
- Проверка наличия на сайте функционала для работы на сайте главного внутреннего баннера.
- Действия пользователей по добавлению функционала для работы на сайте Главного внутреннего баннера.
то перед тем как создавать Главный внутренний баннер Вам сюда:
https://справка.веб-мастерская.бел/база-знаний/пошаговые-инструкции/функционал/document-15543.html
При наличии на сайте функционала Главного внутреннего баннера и необходимости его использования для создания Главного внутреннего баннера с обратным отсчетом:
В Содержание - Боксы - Бокс "Главный внутренний баннер" создайте контейнер "Баннер":
- дайте ему название (оно не будет выводится поверх изображения), например: "Обратный отсчёт до Дня Победы";
- загрузите в него изображение - например
- В поле "Аннотация" добавьте следующий текст:
<div class="may9banner">
<div class="title" style="visibility:hidden;">До Дня Победы осталось:</div>
<div class="timer" style="display:none;">
<span class="li days">00</span>
<span class="sep">:</span>
<span class="li hours">00</span>
<span class="sep">:</span>
<span class="li minutes">00</span>
<span class="sep">:</span>
<span class="li seconds">00</span>
</div>
</div>
- На вкладке Доп. код добавьте следующий код в поле:
<style>
.may9banner .title {color: #f20000;}
.may9banner .timer {display: inline-flex;font-size: 1.4em;justify-items: center;line-height: 1;margin: 15px auto 45px;font-weight: 400;}
.may9banner .timer .li {position: relative;min-width: 3ex;padding: 0 .25ex;}
.may9banner .timer .li:before {content: attr(data-title);display: inline-block;position: absolute;top: 100%;left: 50%;transform: translateX(-50%);font-size: .75ex;white-space: nowrap;}
</style>
<script type="text/javascript">let May9Countdown={timerId:null,init:function(t,e){let n=this;if(n.box=document.querySelector(".may9banner"),!n.box)return!1;n.elDays=n.box.querySelector(".days"),n.elHours=n.box.querySelector(".hours"),n.elMinutes=n.box.querySelector(".minutes"),n.elSeconds=n.box.querySelector(".seconds"),n.date=t,n.finishString=e,!1!==n.tick()&&n.box.querySelector(".timer").removeAttribute("style"),n.timerId=setInterval(function(){n.tick()},1e3),n.box.querySelector(".title").removeAttribute("style")},tick:function(){var t=this,e=new Date,e=t.date-e;if(e<=0)return t.stop(),t.finish(),!1;var n=Math.floor(e/864e5),o=Math.floor(e/36e5%24),i=Math.floor(e/6e4%60),e=Math.floor(e/1e3%60);t.elDays.textContent=String(n).padStart(2,"0"),t.elHours.textContent=String(o).padStart(2,"0"),t.elMinutes.textContent=String(i).padStart(2,"0"),t.elSeconds.textContent=String(e).padStart(2,"0"),t.elDays.dataset.title=t.getDeclension(n,["день","дня","дней"]),t.elHours.dataset.title=t.getDeclension(o,["час","часа","часов"]),t.elMinutes.dataset.title=t.getDeclension(i,["минута","минуты","минут"]),t.elSeconds.dataset.title=t.getDeclension(e,["секунда","секунды","секунд"])},stop:function(){clearInterval(this.timerId),this.timerId=null},finish:function(){this.box.querySelector(".timer").remove(),this.box.querySelector(".title").innerText=this.finishString},getDeclension:function(t,e){return e[4<t%100&&t%100<20?2:[2,0,1,1,1,2][t%10<5?t%10:5]]}};document.addEventListener("DOMContentLoaded",()=>{
May9Countdown.init(new Date("2025-05-09T00:00:00"),"C Днём Победы!")
});</script>
- Нажмите "Сохранить и Выйти"
- PROFIT! Проверьте отображение баннера на главной странице.