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

Ответ 1

Спасибо за ваш совет, не понял, что это возможно с простой строкой 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/

Ответ 2

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');
    }
});

Ответ 3

Если вы используете 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) . '">';
?>

Ответ 4

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

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

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

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

Ответ 5

вы можете сделать это, создав случайную ссылку, используя только 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>

Ответ 6

Если вы хотите использовать 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, которые вы видите на многих веб-сайтах.)