javascript - Willekeurige gradiënt achtergrondkleur

Ik probeer een willekeurige gradiëntachtergrond (tussen 4 kleuren) op elke sectie te krijgen.
Dit is mijn code:

let colors = ["#ffd0d2","#fffdd0","#d0fffd","#d0d2ff"];
    $(".main").children('section').each(function(){   
        let firstGradient = randomNumber(10,90);
        $(this).css(
            "background", "linear-gradient(141deg, "+colors[randomNumber(0,4)]+" "+firstGradient+"%, "+colors[randomNumber(0,4)]+" "+(100-firstGradient)+"%)"
        );
    });
    function randomNumber(min,max){
        return Math.floor((Math.random() * max) + min);
    }

section{
  display:block;
  height:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <section></section>
  <section></section>
  <section></section>
</div>

Antwoord 1, Autoriteit 100%

Als u niet probeert de resterende %te berekenen, lijkt het te werken zoals u verwacht

let colors = ["#ffd0d2","#fffdd0","#d0fffd","#d0d2ff"];
    $(".main").children('section').each(function(){   
        let firstGradient = randomNumber(10,90);
        $(this).css(
            "background", "linear-gradient(141deg, "+colors[randomNumber(0,4)]+" "+firstGradient+"%, "+colors[randomNumber(0,4)] + ")"
        );
    });
    function randomNumber(min,max){
        return Math.floor((Math.random() * max) + min);
    }

section{
  display:block;
  height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <section></section>
  <section></section>
  <section></section>
</div>

Antwoord 2

let colors = ["#ffd0d2","#fffdd0","#d0fffd","#d0d2ff"];
    $(".main").children('section').each(function(){   
        let firstGradient = randomNumber(10,40);
        $(this).css(
            "background", "linear-gradient(141deg, "+colors[randomNumber(0,4)]+" "+firstGradient+"%, "+colors[randomNumber(0,4)]+" "+(100-firstGradient)+"%)"
        );
        "background", "linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%)" 
    });
    function randomNumber(min,max){
        return Math.floor((Math.random() * max) + min);
    }

section{
  display:block;
  height:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <section></section>
  <section></section>
  <section></section>
</div>

Previous articleHoe de achtergrondafbeelding in de container draaien?

Next articleVerkrijg verwarringsmatrix van een Keras Multiclass-model

Willekeurige gradiënt achtergrondkleur

Antwoord 1, Autoriteit 100%

Antwoord 2

Other episodes

Is een functie die Math.random() puur aanroept?

Ik wil een tekst of regel met ellips afkappen met JavaScript

firebase.firestore() is geen functie bij het initialiseren van Cloud Firestore

Hoe krijg ik een hoogte van een toetsenbord in React-Native?

ReferenceError: prestatie is niet gedefinieerd bij gebruik van performance.now()

Herhaal een reeks objecten in Typescript

Zet lengtebeperking in een TextField in react js