Еще одна "фишка", которая вполне может пригодится при создании форм и страниц сайтов, когда что-то закрыто от любопытного взгляда паролем. Да, конечно такую защиту от взгляда можно назвать не более чем ширмой, то есть опытный пользователь легко сможет посмотреть что же скрыто за этой вуалью нагромождения стилей, которые собственно и скрывают страницу. Однако для неискушенных и неопытных пользователей или если информация скрываемая в форме не столь важная, а более должна быть скрыта лишь номинально, этот способ вполне подойдет. Итак, именно о скрытии страницы или блока с помощью пароля, я и расскажу в этой статье.

Принцип работы условия для закрытия страницы от взора пользователя

 Все собственно просто, есть страница, есть слой сверху. При этом слой сверху первоначально темный и не прозрачный, а вот после активации события, то есть ввода пароля, его стиль меняется и они становится невидимым.

Пример 1 работы JS для закрытия страницы от взора пользователя с самого начала

Что на счет примера, то он приведен прямо на странице, Пароль весьма прост - 1234. То есть если вы введете этот код, то сможете посмотреть всю страницу целиком. В стиле на странице я конечно прописал скрывать лишь пол страницы, иначе вы бы не смогли прочитать пароль. Если захотите вновь распаролить страницу, после ее открытия, то просто перезагрузите страницу. Закрытая область на ней обновится, то есть появится вновь.

Код для блока или страницы, где с самого начало все закрыто

Осталось привести сам код Java Script, форму и стили. Все это необходимо будет учесть дабы все работало как надо. Если хоть что-то упустить, то само собой ничего не получится.

Посмотреть код

Пример 2 работы JS для закрытия страницы от взора пользователя через какое-то время

Второй вариант является как бы дразнилкой. То есть вначале страничка открыта, а потом со временем закрывается и открыть ее можно только по паролю. Однако, еще как вариант, ее можно просто перезагрузить и все, тогда она снова будет открыта какое-то время.

Здесь получается задержка реализована с помощью setTimeout, вот и вся хитрость.

Посмотреть код

Пример 3 работы JS для закрытия страницы от взора пользователя через какое-то время с плавным затемнением

В общем-то тоже самое, что и предыдущий пример, только мне не понравился резкий переход и я сделал плавное затемнение со временем. Вот и всего-то.

Посмотреть код

Пример 4 работы JS для закрытия страницы от с изменяющимся кодом по дням

Еще одно "НО", которое меня не устраивало, это то, что пароль должен быть изменяющимся. То есть скажем сегодня такой, завтра такой. Вполне логично предположить из слов "сегодня такой, завтра такой", что зависимость как раз и будет задаваться днями недели и (или) числом в месяце. Какое уж правило придумать здесь все будет ограничиваться вашей фантазией. На самом деле можно придумать очень даже сложную "конструкцию" формулы, алгоритма вывода этих вроде как простых значений.

В моем случае строка в коде - d1 +"2"+ ch + d +"34" , как раз и описывает всю сложность моего правила. Где d1 - день недели + 1, сh - число месяца, d - день недели.

Посмотреть код

На этом можно откланяться и считать статью завершенной.