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

Answer 2

您的问题是，您生成随机颜色，然后在localStorage中设置，每次。

我通过初步检查将您的代码重构为函数。

CLOCKS_PER_SEC / 1000

注意：我认为随机生成器部分有错误，有时随机颜色变为$(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。

使用JavaScript生成随机网站配色方案

2 个答案: