jQueryでランダム色を取得するプログラム

jQueryにて、ランダムの色を返すプログラムを書いてみました。#000000の形式でランダムで吐き出すもの、自分で設定した色の配列の中からランダムで取得して吐き出すもの、rgba()形式のものを用意しました。

jQueryでランダム色を取得するプログラム

作成日
2014/09/10
更新日
2016年8月16日

jQueryにて、ランダムの色を返すプログラムを書いてみました。「jquery ランダム 色 取得」などで検索してみると割かし簡単だったからか、意外に見当たらなかったため自作しました。使いどころがないかもしれませんが。

ランダムな色を#000000形式で取得

説明としてはまず、0~9、a~fの16進数の配列を用意しています。
次に「Math.floor( Math.random()*16)」で0~16までのランダムなキーを指定して、配列から値を取得します。
そして、「#」以下の文字を1文字ずつ付け足すのを「for」で6回繰り返しています。
最終的に色が「#000000」の形式でランダムな色が返されます。

指定した色パターンをランダムに取得

物足りなかったので、追記です。
全くのランダムだと背景色との兼ね合いや、色がどぎつい場合もあるかと思いますので、自分の好きな色の中からランダムで返すものです。
こちらは検索でたくさん出てきてましたが、前項の応用として記述したいと思います。
ポイントは配列の数を「.length」で取得してランダムの上限をつけているところです。

ランダムな色をrgba()形式で取得

ついでにrgbaバージョンも書いてみました。

  • 初心者 より:

    初めまして。
    文字別にランダムに表示して、アニメーション(フェード、スライドなど)に表示したいときはどうしたらよいでしょうか?
    ご教授お願いします。

  • tetch1987 より:

    該当要素にeachを利用してみたらいかがでしょうか。

    ■style
    div{
    display:none;}
    ■html
    <div>テキスト</div>
    <div>テキスト</div>
    <div>テキスト</div>
    ■jQuery
    $(function(){
    $(‘div’).each(function(){
    $(this).css({‘background-color’:getRumRgba()}).fadeIn();
    });
    });

  • コメントを残す

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Category

Archive