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

Question

我目前在一个小型网站上工作，我认为如果该网站在每次访问时采用随机配色方案会很奇怪 - 这意味着每次用户访问该网站时，他们会看到略有不同的版本。

我曾尝试使用 JavaScript 执行此操作，但网站在每次访问页面时都会生成一种新颜色...

任何帮助都会很棒 - 如果它可以单独使用 JS 来完成？

$(文档).ready(函数(){ // 生成站点标题的随机颜色... 让颜色 = [ '#F8E71C', '#1cf8b1', '#1cb1f8', '#c21cf8', '#f81c3a', ]; 让 randomNumber = Math.floor(Math.random() * colours.length) + 1; 让 header = $('.site-head'); 让 cardColor = $('.card__border'); localStorage.setItem("siteTheme", colours[randomNumber]); if (localStorage.getItem("siteTheme")) { header.css({ 背景颜色：localStorage.getItem("siteTheme"), }); 卡片颜色.css({ 背景颜色：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"),
    }); 

});