Изменение информации при каждой новой загрузке страницы сайта способно не только разнообразить его внешний вид, но и просто обеспечить доступ к большему объему информации. Заключения это вполне логичные, но требующие неких потуг со стороны веб дизайнера и веб мастера. Именно о том, как же реализовать подмену информации при каждом обновлении страницы я и расскажу вот в этой вот статье.
Надо начать с прописных истин. Подмену конечных условий на странице сайта можно реализовать как с помощью PHP кода, который я не буду разбирать, но такая возможность существует, о чем я повторюсь и с помощью Java Script. Сразу скажу, что в статье будет именно Ява скрипт и написан он мной как любителем, так что если будут замечания или предложения, то они будут восприниматься положительно, если их изложение будет по существу и в корректной форме. Итак, начну.

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

Меняющаяся картинка

 Второе, это генератор случайных чисел стандартная функция для Java Script с помощью оператора Math.random(). Этот оператор генерирует числа от 0 до 1 (1 не включительно), с шагом 0,001. То есть 0,001, 0,002, и т.д.
Итак, два начальных критерия с изменением данных, к которым можно привязаться определены, теперь к коду.
Собственно пример 1.


Вот посмотрите перед вами какая-то картинка и какие-то цифры. Как только вы обновите страницу, то все обновится, то есть картинка и цифры. (Картинки всего у меня три)

По факту выполняются следующие условия:
- Верхняя картинка (цифра) и вторая цифра под ней обновляется только при обновлении страницы, при этом верхняя картинка (цифра) зависит от секунд;
- Вторая цифра под картинкой или цифрой это секунды;
- Третья картинка генерируется каждую секунду абсолютно хаотично. При повторении картинки кажется, что она не переключается, но она все равно обновляется каждую секунду!
И ниже есть все те же картинки, но они привязаны к генератору случайных чисел и с условием, что функция обновляется каждую секунду. То есть здесь может обновиться каждую секунду картинка, а может нет. Это уж как повезет, ведь это настоящий рендом!
Смотреть код

Теперь к самому коду, где будут описания, что-либо добавлять я особо не вижу смысла. Осталось выслушать вашу реакцию, но в том именно виде, что был упомянут мной вначале этого «произведения». Ну и продолжить про вариант с ссылкой.

Меняющаяся картинка и ссылка

Пример 2

Итак, пример выше на самом деле касался исключительно смены картинки, но если речь идет об изменении ссылки, то нельзя обойтись без нее самой... Собственно про ссылку стоит сказать две вещи. Ссылка должна обязательно что-то обрамлять и это что-то не должно быть пустым пространством. Второе. Для того, чтобы она вызывалась и менялась нужно применить еще один дополнительный оператор (document.getElementById("сам id").href). Ну как же без него!? В итоге, код с меняющейся картинкой или текстом будет выглядеть уже так.

В нашем случае получается меняется и картинка и ссылка, то есть есть две переменные, только переменная ссылки обрамляет переменную картинки.


Конечно же пример, где ссылка будет меняться или на нашу же страницу или на статью про софт для жестких дисков. Тестим. См. выше.

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

Еще один пример 3

Смотреть код