あなたのサイトをより専門的にするためにランダムな背景色変化を実装する方法


Hello World! 私は新しいシリーズを始めることに決めました!5分でCSS/JSトリック-それはあなたのウェブサイトに適用することができます迅速かつ有用なトリックの集中されます.私は決して20行のコードを超えないようにしようとすると、常にポイントにまっすぐ行く.私は非常に簡単に開始する方法、ランダムな背景色の変更を実装する.
そのためにはJavaScript関数が必要です.
function random_bg_color() {
    let x = Math.floor(Math.random() * 256);
    let y = Math.floor(Math.random() * 256);
    let z = Math.floor(Math.random() * 256);
    let bgColor =  `rgb( ${x}, ${y}, ${z} )`;
    document.body.innerText = bgColor;

    document.body.style.background = bgColor;
}

setInterval(random_bg_color, 2000); // You can easily change Interval here
私は何も本当に説明するのは難しいと思う、我々は3ランダム変数を作成し、バックグラウンドに割り当てる.私たちはどのようにRGBシステムの動作を知っている必要があります(またはジャックのように我々はまた、HSLを使用することができますコメントで述べた).

RGB defines the values of red (the first number), green (the second number), or blue (the third number). The number 0 signifies no representation of the color and 255 signifies the highest possible concentration of the color. Pluralsight

document.body.innerText = bgColor;
このコード行は、画面上の色のRGBを表示するのに役立つ.
ここでライブプレビューを行うことができます.
Click Me
これが助けと感謝の読書を!

Please smash that like button to make me understand that you want the series to continue :)


この記事をチェック


我々の会報を購読してください!


Loooong、楽しい、毎週あなたのために要約
私の記事の無料のPDF版
カスタマイズ可能な受信トレイ
それは---フリー-とあなたは私を助ける!