Загрузить случайный CSS при обновлении страницы

Question

Мне было интересно, как лучше всего вызвать случайный файл CSS при обновлении страницы с помощью Javascript?

Большое спасибо

Answer 1

var link = [];
link[0] = "http://site.com/css/style1.css";
link[1] = "http://site.com/css/style2.css";
link[2] = "http://site.com/css/style3.css";


$(function() {
    var style = link[Math.floor(Math.random() * link.length )];
    $('<link />',{
        rel :'stylesheet',
        type:'text/css',
        href: style
    }).appendTo('head');
});

Изменить : Спасибо Василию Сиддики!

var link = [];
link[0] = "http://site.com/css/style1.css";
link[1] = "http://site.com/css/style2.css";
link[2] = "http://site.com/css/style3.css";


$(function() {
    var style = link[Math.floor(Math.random() * link.length )];
    if (document.createStyleSheet){
        document.createStyleSheet(style);
    }else{
        $('<link />',{
            rel :'stylesheet',
            type:'text/css',
            href: style
        }).appendTo('head');
    }
});

Answer 2

Если вы используете PHP, вы можете прочитать свой каталог CSS и выбрать случайный файл, подобный этому:

<?php
$css_dir = '/css';
$files   = array();

foreach(glob($cssdir.'/*.css') as $file) 
{
    $array[] = $file;
}

echo '<link rel="stylesheet" type="text/css" href="' . array_rand($files, 1) . '">';
?>

Answer 3

Вы можете сделать это, сгенерировав случайную ссылку, используя только javascript

<p id="demo"></p>

<script>
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5)
{
x.innerHTML="<a href='http://w3schools.com'>Visit W3Schools</a>";
}
else
{
x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>";
}
</script>

Answer 4

Спасибо за ваш совет, не понял, что это возможно с помощью простой строки php, и обнаружил, что этот метод был довольно коротким и приятным

<link href="/styles/<?php echo mt_rand(1, 5); ?>.css" rel="stylesheet" type="text/css"/>

Нашел его здесь, http://forum.mamboserver.com/showthread.php?t=61029

Большое спасибо

пс.A List Apart также имеет довольно простой и блестящий способ переключения изображений, http://www.alistapart.com/articles/randomizer/

Answer 5

Если вы хотите использовать javascript, лучшим способом является загрузка всех случайных стилей в одном файле обычным способом.

Затем добавьте все случайные css с помощью числа, такого как:

.random-1 h1 {
    color: blue;
}
.random-2 h1 {
    color: red;
}
/* ... etc... */

Затем просто добавьте случайный класс в тело с помощью JavaScript.

document.getElementsByTagName('body')[0].className+=' random-' + Math.floor((Math.random() * 10) + 1);

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

(Проблемы с рендерингом будут зависеть от того, какие изменения вы делаете - хотя это не отличается от скрытия и отображения объектов DOM, которые вы делаетесмотрите на многих сайтах.)

Answer 6

Добавить элемент <link> в document.ready.

var randomFileName=Math.random(); // or whatever

$(document).ready(function() {
    $('head').append('<link rel="stylesheet" type="text/css" href="' + randomFileName + '.css">');
});

Не проверено.Как упоминалось выше, вероятно, для серверного сценария лучше (читай: более совместимый) идея выплевывать случайное имя файла непосредственно в HTML-код страницы, а не использовать хитрость JS.