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

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

10 голосов
/ 28 августа 2010

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

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

Ответы [ 6 ]

8 голосов
/ 28 августа 2010 
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');
    }
});
5 голосов
/ 28 августа 2010

Если вы используете 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) . '">';
?>
1 голос
/ 25 июня 2013

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

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

0 голосов
/ 10 мая 2014

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

0 голосов
/ 28 августа 2010

Добавить элемент <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.

...