Ограничение перехода на кнопке по времени

Задача: вы несколько раз в неделю проводите встречи для учеников по какому-то своему расписанию. Нужно, чтобы ученики могли перейти по ссылкам в кнопках на эфир в течение определенного промежутка времени. Например, за 15 минут до начала и 15 после. То есть, только в течение 30 минут кнопка активна.

Цель всего этого текста показать нестандартную настройку, которой вы в дальнейшем сможете найти и другое применение.

Стандартный способ

Использование встроенного функционала видимости у блоков — «показывать по расписанию».

Но чтобы показывать, что переход «невозможен», необходимо дублировать блок, который с неактивной кнопкой будет показываться оставшееся время.

Например, у нас блок с возможностью перехода по ссылке должен показываться по средам с 18:45 до 19:15. Значит все оставшееся время будет отображаться «копия блока с неактивной кнопкой». А так как в стандартном «показывать по расписанию» мы можем задать только 3 промежутка, то и таких блоков нужно делать несколько, чтобы охватить весь тайминг.

Да, можно сильно упростить эту механику — сделать заголовок «Внимание, ученики! Кнопка перехода на эфир появится в среду с 18:45 по 19:15», и ниже блок с активной кнопкой с настройкой видимости. Без отображения неактивной кнопки. Но делаем все по ТЗ — неактивная кнопка отображается! 😎

Итого, для реализации через встроенную настройку видимости нам нужен «блок 1», и его «неактивные копии». И когда придет время правок, мы будем править и перенастраивать все блоки 😭

Нестандартный способ

Я не обладаю писательским талантом, но думаю, вы поняли, что акцент у этой статьи на этом варианте. Нам потребуется блок «css-код», который размещаем самым первым и добавляем следующее:

.disabled .f-btn {
   	pointer-events: none; /* делаем элемент неактивным для взаимодействия */
	cursor: default; /*  курсор в виде стрелки */
	color: #888 !important; /* цвет текста серый */
	background-color: #ff660059; /* цвет текста оранжевый с прозрачностью 59% */
}

Здесь для класса «.disabled» мы задаем параметры «неактивности». Кнопка перестанет кликаться, а её цвет станет тусклее за счет числа 59 в 5 строке кода. Добавляем требуемой кнопки 2 класса — один сделает ее неактивной, второй просто для удобства обращения к нужной кнопки. Их же может быть несколько.

Если все верно сделали, то цвет кнопки поменяется, а сама она перестанет нажиматься.

Теперь нам остается только последним блоком на странице добавить скрипт со следующим содержанием.

$(function(){
    $('.d1').removeClass('disabled');
});

И в уже стандартных настройках видимости задаем блоку время показа — «среда 18:45 — 19:15».

Что в итоге происходит. Есть блок с кнопкой, которая сразу при загрузке страницы становится неактивной из-за css-кода. А в заданный промежуток времени показывается блок со скриптом, который удаляет класс «невидимости», делая кнопку видимой.

Теперь, действуя по нестандартному варианту, можно менять свойства у любых элементов в конкретные заданные промежутки времени.