Как связать favicon со случайным цветом CSS?

Question

Как связать favicon со случайным цветом CSS?

Я пытаюсь сделать так, чтобы мой значок был того же цвета, что и плашечный цвет на моем сайте. Цвет плашек на моем сайте меняется случайным образом между 3 цветами при каждом обновлении (с использованием JavaScript). Я почти смог заставить свои значки произвольно меняться, но я не уверен, как вместо этого связать их с определенными цветами в моем javascript. Проверьте мой сайт здесь.

HTML & PHP:

<head>
<link rel="shortcut icon" type="image/ico" href="../images/favicon_<?php echo rand(1,3); ?>.ico"/>
</head

Javascript:

var colors = ['#FFCB80', '#5A53EA', '#65CE9C'];
var random_color = colors[Math.floor(Math.random() * colors.length)];

$(document).ready(function() {
   $('.tag').css('color', random_color);
   $('#nav a:hover').css('color', "black");
   $('#nav a:link').css('color', random_color);
   $('#nav a:visited').css('color', random_color);
   $('.number').css('color', random_color);

});

0

javascript php html random favicon

Источник

user6516387 20 ноя '16 в 00:25

2 ответа

Другие вопросы по тегам javascript php html random favicon

user3610018 20 ноя '16 в 00:30 2016-11-20 00:30 · Answer 1 · 2016-11-20 00:30

Просто используйте случайное число, сгенерированное в php-коде в javascript.

Изменить: я посетил ваш веб и увидел, что у вас есть javascript в другом файле, так что вы можете создать переменную js, например, в заголовке документа, чтобы сохранить индекс цвета, а затем использовать то же имя переменной в файле js использовать это.

Кроме того, я увидел, что ваш HTML-код печатает это буквально:

<link rel="shortcut icon" type="image/ico" href="../images/favicon_<php echo rand(1,3); ?>.ico">

Пожалуйста, проверьте это, потому что кажется, что страница не обрабатывается PHP.

HTML & PHP:

<?php
$randomIndex = rand(1,3); // From 1 to 3
?>

<head>
<link rel="shortcut icon" type="image/ico" href="../images/favicon_<?php echo $randomIndex; ?>.ico"/>
<script>
var random_color_index = <?php echo $randomIndex-1; ?>; // From 0 to 2
</script>
</head>

Javascript:

var colors = ['#FFCB80', '#5A53EA', '#65CE9C'];
var random_color = colors[random_color_index]; // From 0 to 2

$(document).ready(function() {

$('.tag').css('color', random_color);
$('#nav a:hover').css('color', "black");
$('#nav a:link').css('color', random_color);
$('#nav a:visited').css('color', random_color);
$('.number').css('color', random_color);

user5929494 20 ноя '16 в 01:27 2016-11-20 01:27 · Answer 2 · 2016-11-20 01:27

С помощью Javascript вы можете передать свои new url а также id вашей таблицы стилей ссылки, чтобы функционировать ниже, чтобы регулярно обновлять внешние CSS. Пожалуйста, просмотрите этот:

function changeHref(url, id) {
  var h = document.getElementsByTagName('head')[0],
    mylink = document.getElementById(id);
  if (!mylink) {
    mylink = document.createElement('link');
    mylink.id = id;
    mylink.rel = 'stylesheet';
    mylink.type = 'text/css';
  }
  mylink.href = url;
  h.appendChild(mylink);
  console.log(mylink);
}
changeHref("//yourUrl", "yourlinkId");