每5秒加載一次隨機CSS，而無需刷新頁面

Question

您知道如何在不刷新頁面的情況下加載隨機CSS嗎？ 我想加載一個隨機樣式，例如在該線程中實現的樣式：

<script>
var link = [];
link[0] = "css/0.css";
link[1] = "css/1.css";
link[2] = "css/2.css";
link[3] = "css/3.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');
    }
});
</script>

該代碼有效，但是是否可以每5秒隨機加載另一種樣式而無需刷新？ 非常感謝。

Answer 1

使用setInterval()每5秒執行一次，並使用'document.createElement`創建新鏈接。

您還必須記住在添加新鏈接之前先刪除先前創建的鏈接。

 function getLink(){ // Find previous <link> (if exists) and remove it var prevLink = document.querySelector("head > link"); if(prevLink) { document.querySelector("head").removeChild(prevLink); } // Get a random CSS link var style = links[Math.floor(Math.random() * links.length )]; // Create a new <link> element and configure it var link = document.createElement("link"); link.setAttribute("href", style); link.setAttribute("rel", "stylesheet"); console.log(link); // Inject element into the DOM document.querySelector("head").appendChild(link); // Once the stylesheet has finished downloading, add it to the DOM link.addEventListener("load", function(){ // Now that the new stylesheet has been applied, wait 5 seconds and // then replace it again: setTimeout(getLink, 5000); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div i="styleMe">I'm being randomly styled.</div> 

Answer 2

新的<link>加載可能會有所延遲； 如果出現問題，則可以使用Promise等到新的<link>加載后再調用loadCSS()

var link = ["0.css", "1.css", "2.css", "3.css"];

$(function() {
  function loadCSS() {
    return new Promise(function(resolve) {
      $("link:not(:last)").remove();
      var style = link[Math.floor(Math.random() * link.length)];
      var css = $('<link />', {
          rel: 'stylesheet',
          type: 'text/css',
          href: style
        })
        .on("load", function() {
          setTimeout(function() {
            resolve(css)
          }, 5000)
        })
        .appendTo('head');
    })
    .then(function() {
      return loadCSS()
    })
  }
  loadCSS()
});

http://plnkr.co/edit/yUEJXh1szCAGB9s7VqvM?p=預覽

Answer 3

也許在這個附近...

  var links = ["css/0.css", "css/1.css", "css/2.css", "css/3.css"]; function setCSS(){ var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = links[ Math.floor(Math.random()*links.length) ]; document.head.link && document.head.link.remove(); document.head.link = link; document.head.appendChild(link); } setInterval(setCSS,5000); setCSS();