在頁面刷新時加載隨機CSS

Question

我想知道用Javascript刷新頁面時調用隨機CSS文件的最佳方式是什麼？

非常感謝

Answer 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

非常感謝

ps。列表除了也有一個非常簡單而輝煌的方式來切換圖像，http://www.alistapart.com/articles/randomizer/

Answer 2

上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欺騙。

Answer 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) . '">'; 
?> 

Answer 4

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 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> 

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對象的隱藏和顯示沒有區別許多網站）。