Tải CSS ngẫu nhiên trên trang làm mới

Question

Tôi đã tự hỏi whats cách tốt nhất để gọi một tệp css ngẫu nhiên trên trang làm mới với Javascript là gì?

Rất cám ơn

Answer 1

Cảm ơn lời khuyên của bạn, đã không nhận ra nó đã có thể với một dòng đơn giản của php và thực sự thấy rằng phương pháp này là khá ngắn và ngọt ngào

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

Tìm thấy nó ở đây, http://forum.mamboserver.com/showthread.php?t=61029

Rất cám ơn

ps. A List Apart cũng có một cách khá đơn giản và rực rỡ để chuyển đổi hình ảnh, http://www.alistapart.com/articles/randomizer/

Answer 2

Nối một yếu tố <link> trên document.ready.

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

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

Untested. Như đã đề cập ở trên, nó có lẽ là một ý tưởng tốt hơn (đọc: tương thích hơn) cho một kịch bản phía máy chủ để nhổ ra một tên tệp ngẫu nhiên trực tiếp trong HTML của trang thay vì sử dụng JS trickery.

Answer 3

Nếu bạn đang sử dụng PHP, bạn có thể đọc thư mục CSS của bạn và chọn một tập tin ngẫu nhiên như thế này:

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

Sửa: Cảm ơn bạn 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 5

bạn có thể làm điều này bằng cách tạo liên kết ngẫu nhiên chỉ sử dụng 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

Nếu bạn muốn sử dụng javascript cách tốt nhất là để tải tất cả các kiểu ngẫu nhiên trong một tệp duy nhất theo cách thông thường.

Sau đó thêm vào trước tất cả các css ngẫu nhiên với một số ví dụ như:

.random-1 h1 { 
    color: blue; 
} 
.random-2 h1 { 
    color: red; 
} 
/* ... etc... */ 

Sau đó, chỉ cần thêm một lớp ngẫu nhiên cho cơ thể với javascript.

document.getElementsByTagName('body')[0].className+=' random-' + Math.floor((Math.random() * 10) + 1); 

Điều này sẽ hạn chế tải và hiển thị sự cố và bạn không cần phải lo lắng về thời điểm gọi javascript. (cộng với bạn có tùy chọn để thay đổi sang kiểu ngẫu nhiên khác với nhiều javascript hơn)

(Vấn đề hiển thị sẽ phụ thuộc vào loại thay đổi bạn đang thực hiện - mặc dù điều này không khác với việc ẩn và hiển thị đối tượng DOM bạn nhìn thấy nhiều trang web.)