使用JavaScript生成隨機網站配色方案

我目前正在一個小型網站上工作，如果網站在每次訪問時都採用了隨機配色方案 - 這意味着每次用戶訪問該網站時都會看到略有不同的版本。使用JavaScript生成隨機網站配色方案

我試圖這樣做，使用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"), 
     }); 
    } 

});

來源

2016-08-21 JNH1994

嘗試使用cookie http://www.w3schools.com/js/js_cookies.asp – fernando

您的代碼不起作用？ – Qianyue

你的問題是，你生成一個隨機的顏色，然後將其設置爲每次本地存儲，。

我用初始檢查將代碼重構爲函數。

$(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的。

來源

2016-08-21 16:18:32 yuriy636

是的，我改變了+ 0，它在Chrome中工作，但是在Safari中它只是顯示一個白色背景，並顯示一個錯誤：SyntaxError：意外的標識符'標題' – JNH1994

沒關係，我發現Safari不允許讓.. 。謝謝您的幫助！ – JNH1994

有用的網站用於檢查如下內容：http://caniuse.com/#search=let如果您還不知道它。 – yuriy636

你爲什麼不前檢查的localStorage存儲另一個隨機顏色sheme？

$(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"), }); });

來源

2016-08-21 16:09:30 Hulothe

感謝您的答覆 - 但是，當我使用該代碼時，我得到一個參考錯誤頭：未捕獲ReferenceError：頭未定義 – JNH1994

哦，是的，對不起，我編輯了代碼。 – Hulothe

你應該從隨機數生成器中移除'+ 1'，因爲JS數組是基於0的。 – Hulothe

使用JavaScript生成隨機網站配色方案

回答

相關問題