我在想使用JavaScript在页面刷新时调用随机的CSS文件,最好的方法是什么?
非常感谢。
非常感谢。
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');
}
});
<?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) . '">';
?>
谢谢您的建议,我之前并没有意识到可以用一行简单的 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/
<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>
document.ready
事件中添加一个<link>
元素。var randomFileName=Math.random(); // or whatever
$(document).ready(function() {
$('head').append('<link rel="stylesheet" type="text/css" href="' + randomFileName + '.css">');
});
未经测试。如上所述,对于服务器端脚本而言,直接在页面的HTML中输出随机文件名可能是一个更好(即更兼容)的想法,而不是使用JS技巧。
.random-1 h1 {
color: blue;
}
.random-2 h1 {
color: red;
}
/* ... etc... */
然后,只需使用JavaScript向body添加一个随机类即可。
document.getElementsByTagName('body')[0].className+=' random-' + Math.floor((Math.random() * 10) + 1);
这样可以限制加载和渲染问题,您不需要担心何时调用JavaScript。(另外,您可以选择更多JavaScript的随机样式)
(渲染问题取决于您所做的更改类型 - 尽管这与许多网站上看到的DOM对象的隐藏和显示没有区别。)
nginx
,apache
,ruby
,php
,asp
或者你在后端使用的任何技术 - jigfox