Question

我想知道用Javascript在页面刷新时调用随机css文件的最佳方法是什么？

非常感谢

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

编辑：谢谢Basil Siddiqui！

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

感谢您的建议，并没有意识到这可能只需要一个简单的php系列，并且实际上发现这个方法非常短而且很好

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

在此处找到http://forum.mamboserver.com/showthread.php?t=61029

非常感谢

PS。 List Apart还有一种非常简单明了的方式来切换图像，http://www.alistapart.com/articles/randomizer/

Answer 4

你可以通过使用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 5

在<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技巧，这可能是一个更好的（读取：更兼容）的想法。

Answer 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对象的隐藏和显示没有区别。）

在页面刷新时加载随机CSS

6 个答案: