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

#javascript #html #jquery #css

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

Ответы

Ответ 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;
}







Этот же вариант на 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;
}