За последние 24 часа нас посетили 19707 программистов и 1656 роботов. Сейчас ищут 1473 программиста ...

рандомный вывод стилей css на сайте

Тема в разделе "PHP для новичков", создана пользователем Feorayler, 27 ноя 2016.

  1. Feorayler

    Feorayler Новичок

    С нами с:
    1 июн 2016
    Сообщения:
    17
    Симпатии:
    0
    Помогите пожалуйста! Как можно сделать так, чтобы при обновлении страницы или ее загрузке выводился рандомный стиль, который я установлю.
    Код (Text):
    1. .header_newyear {
    2.     background-image:url(путь к картинке);
    3. }
    4. .header_newyear2{
    5.     background-image:url(путь к картинке);
    6. }
    7. .header_newyear3 {
    8.     background-image:url(путь к картинке);
    9. }
    10. .header_newyear4 {
    11.     background-image:url(путь к картинке);
    12. }
    13. .header_newyear5 {
    14.     background-image:url(путь к картинке);
    15. }
    И мне нужно, чтобы он рандомно брался. А как сделать не знаю(. Поискал - ничего действенного не нашел в инете(
    Помогите, кто знает. С помощью php может как-то можно сделать? Если можно без php то напишите как - буду очень благодарен!
     
  2. lastdays

    lastdays Активный пользователь

    С нами с:
    27 сен 2012
    Сообщения:
    410
    Симпатии:
    74
    PHP:
    1. <?php
    2. $newyear= array('header_newyear', 'header_newyear2', 'header_newyear3', 'header_newyear4', 'header_newyear5');
    3. ?>
    4. <div class="<?=$newyear[mt_rand(0,count($newyear)-1)]?>">
    5.  <!-- html -->
    6. </div>
     
    Feorayler нравится это.
  3. askanim

    askanim Старожил

    С нами с:
    7 апр 2016
    Сообщения:
    2.201
    Симпатии:
    166
    Адрес:
    GABRIEL
    @lastdays глупости какие. Зачем нагружать лишней работой сервер. Если это можно сделать на js.
    --- Добавлено ---
    Код (Javascript):
    1. <script>
    2.    
    3. var arr = [
    4.         'header_newyear',
    5.         'header_newyear2',
    6.         'header_newyear3',
    7.         'header_newyear4',
    8.         'header_newyear5'
    9.     ];
    10.     function randomInteger(min, max) {
    11.         var rand = min - 0.5 + Math.random() * (max - min + 1)
    12.         rand = Math.round(rand);
    13.         return rand;
    14.     }
    15.     console.log(arr[randomInteger(0, arr.length - 1)]);
    16. </script>
     
    Feorayler нравится это.
  4. Feorayler

    Feorayler Новичок

    С нами с:
    1 июн 2016
    Сообщения:
    17
    Симпатии:
    0
    спасибо большое! Метод оказался действенным. Ниже js написали, но он что-то не сработал. Но это уже не суть важно. Еще раз огромнешее спасибо!!
     
  5. lastdays

    lastdays Активный пользователь

    С нами с:
    27 сен 2012
    Сообщения:
    410
    Симпатии:
    74
    Я не думаю что из-за этих двух строк особо нагрузит сервер :D

    Блин, ей-богу, порой смешно.
    Можно и на js написать, какая к черту разница)

    На крайний случай можно закешировать класс-лого и раз в 2 мин обновлять)
     
  6. askanim

    askanim Старожил

    С нами с:
    7 апр 2016
    Сообщения:
    2.201
    Симпатии:
    166
    Адрес:
    GABRIEL
    Ну если ты просто скопировал то конечно не сработал. Надо было чуть голову включить и всё бы сработало. Это я тебе в консоль твои классы вывел! А тебе нужно методом jquery например: addClass; Подставить к определённому div.
     
  7. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    element.classList.add();
     
    askanim нравится это.
  8. askanim

    askanim Старожил

    С нами с:
    7 апр 2016
    Сообщения:
    2.201
    Симпатии:
    166
    Адрес:
    GABRIEL
    @Fell-x27 если честно я уже чистый js почти не помню, разбаловался, надо бы вспомнить знания)))))