JavaScriptを使用してランダムなサイト配色を生成する

Question

現在、私は小規模なサイトに取り組んでおり、サイトが訪問ごとにランダムな配色を採用していると気が利いていると思っています。わずかに異なるバージョン。

すべてのヘルプは素晴らしいことだ

...私はJavaScriptを使用してこれを行うことを試みてきたが、サイトは、各ページの訪問に新しい色を生成します - それは、単にあるJSを使用して行うことができますか？

 

$(document).ready(function(){ 

    // Generate random colour for the header of the site... 

    let colours = [ 
     '#F8E71C', 
     '#1cf8b1', 
     '#1cb1f8', 
     '#c21cf8', 
     '#f81c3a', 
    ]; 

    let randomNumber = Math.floor(Math.random() * colours.length) + 1; 

    let header = $('.site-head'); 
    let cardColour = $('.card__border'); 

    localStorage.setItem("siteTheme", colours[randomNumber]); 

    if (localStorage.getItem("siteTheme")) { 
     header.css({ 
      backgroundColor: localStorage.getItem("siteTheme"), 
     }); 

     cardColour.css({ 
      backgroundColor: localStorage.getItem("siteTheme"), 
     }); 
    } 

}); 

Answer 1

あなたの問題は、ランダムな色を生成し、その後のlocalStorage、たびでそれを設定することです。

私はコードを最初のチェックで関数にリファクタリングしました。

$(document).ready(function() { 
 

 
    let header = $('.site-head'); 
 
    let cardColour = $('.card__border'); 
 

 
    if (localStorage.getItem("siteTheme")) { 
 
     setColorScheme(); 
 
    } else { 
 
     createColorScheme(); 
 
    } 
 

 
    function createColorScheme() { 
 
     let colours = [ 
 
      '#F8E71C', 
 
      '#1cf8b1', 
 
      '#1cb1f8', 
 
      '#c21cf8', 
 
      '#f81c3a', 
 
     ]; 
 

 
     let randomNumber = Math.floor(Math.random() * colours.length) + 1; 
 

 
     localStorage.setItem("siteTheme", colours[randomNumber]); 
 

 
     setColorScheme(); 
 
    } 
 

 
    function setColorScheme() { 
 
     header.css({ 
 
      backgroundColor: localStorage.getItem("siteTheme"), 
 
     }); 
 

 
     cardColour.css({ 
 
      backgroundColor: localStorage.getItem("siteTheme"), 
 
     }); 
 
    } 
 

 
});

注：私は時々ランダムな色がundefinedなり、あなたは乱数発生器の一部に誤りがあると思う、私はそれが理由+ 1のだと思います。

Answer 2

なぜあなたは別のランダムな色のshemeを格納前のlocalStorage をチェックしませんか？

$(document).ready(function(){ 

    // Generate random colour for the header of the site... 

    let colours = [ 
     '#F8E71C', 
     '#1cf8b1', 
     '#1cb1f8', 
     '#c21cf8', 
     '#f81c3a', 
    ]; 

    let header = $('.site-head'); 
    let cardColour = $('.card__border'); 

    if (!localStorage.getItem("siteTheme")) { 
     let randomNumber = Math.floor(Math.random() * colours.length) + 1; 

     localStorage.setItem("siteTheme", colours[randomNumber]); 
    } 

    header.css({ 
     backgroundColor: localStorage.getItem("siteTheme"), 
    }); 

    cardColour.css({ 
     backgroundColor: localStorage.getItem("siteTheme"), 
    }); 

});