Разный css при обновлении страницы F5

297

12 сентября 2017, 08:43

Веб дизайн только познаю, хотя занимаюсь им давненько, но понимаю что это бездна знаний и вот по сути вопрос в чем. Как сделать разный CSS при перезагрузке страницы? Разные иконки например, что бы разным посетителям сайта показывались разные иконки. И при обновлении нажимая на F5 менялись стили иконок. ???

Answer 1

На чистом JavaScript:

var styles = ['blue', 'red', 'green']; // диапазон значений 
 
randomStyles('class', styles); // вызываем функцию "рандомных стилей" 
 
function randomStyles(sel, arr) { // sel - селектор, arr - диапазон значений 
  var els = document.getElementsByClassName(sel), // получаем элементы с необходимым классом 
    newArr = arr; // объявляем новый массив 
  for (let i = 0; i < els.length; i++) { // перебираем все элементы с классом 
    var randClass = newArr[Math.floor(Math.random() * newArr.length)]; // рандомное значение из массива 
    els[i].classList.add('class-' + randClass); // добавляем элементу класс с полученным значением 
    newArr.splice(newArr.indexOf(randClass), 1); // удаляем из массива подставленный класс, чтобы избежать повтора 
  } 
}

.class { 
  width: 200px; 
  height: 50px; 
  margin-bottom: 10px; 
} 
 
.class-blue { 
  background: blue; 
} 
 
.class-red { 
  background: red; 
} 
 
.class-green { 
  background: green; 
}

<div class="class"></div> 
<div class="class"></div> 
<div class="class"></div>

Этот же вариант на jQuery (производительность ниже, но вдруг кому-то пригодится):

var styles = ['blue', 'red', 'green']; // диапазон значений 
 
randomStyles('.class', styles); // вызываем функцию "рандомных стилей" 
 
function randomStyles(sel, arr) { // sel - селектор, arr - диапазон значений 
  var els = $(sel), // получаем элементы с необходимым классом 
    newArr = arr; // объявляем новый массив 
  els.each(function(id) { // перебираем все элементы с классом 
    var randClass = newArr[Math.floor(Math.random() * newArr.length)]; // рандомное значение из массива 
    $(this).addClass('class-' + randClass); // добавляем элементу класс с полученным значением 
    newArr.splice($.inArray(randClass, newArr), 1); // удаляем из массива подставленный класс, чтобы избежать повтора 
  }); 
 
}

.class { 
  width: 200px; 
  height: 50px; 
  margin-bottom: 10px; 
} 
 
.class-blue { 
  background: blue; 
} 
 
.class-red { 
  background: red; 
} 
 
.class-green { 
  background: green; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="class"></div> 
<div class="class"></div> 
<div class="class"></div>