ランダムな色は2つの形式で利用できます。
エフェクトプレビュー:http://wjf444128852.github.io/demolist/js/test/index.html
1。RGB(xxx、xxx、xxx)
2。#xxxxxx
次の2つのランダムメソッドが実装されています
アイデア: Xをランダムにする方法
1. ITのXXXは、0〜255の間のランダムな整数です。 Math.random()*255を使用して、0〜255の間に乱数を取得します。
その後、math.floor()はその前に小数点を保持します
2。ITのXは、0123456789ABXDEFの6のランダムな組み合わせです。
ここでは、配列または文字列を使用して処理できます。ここでは、配列を使用します。アレイから6回撮影して、アレイサブスクリプトを取得するだけで、毎回0〜16のランダムな整数です。
注(メソッド2の変更は#xxxxですが、ブラウザはこの場合のDOM要素のバックグラウンドカラー属性値をチェックしますが、JSの割り当ては#XXX形式です。)
コードは次のとおりです。
HTML
<body> <div> <p> <a href = "javascript :;" id = "btn-one"> randomcolor-rgb </a> </p> <ul> <li> <div> </div> </li> <li> <div> </div> </li> <li> <div> </li> <li> <div> </div> </li> </div> </li> </</</</</</</</</div> <li> <div> </div> </li> <li> <div> </div> </li> <li> <div> </div> </li> <li> <div> </div> </li> <li> div> </li> <li> <div> </div> </li> </div> </</</</</</</</</</</</</div> <li> <div> </div> </li> </ul> </div> </body>
CSS
*{box-sizing:border-box;リストスタイル:なし;国境:なし;パディング:0;マージン:0; } p {text-align:center;マージン:20px; } pa {font-size:20px; font-weight:300;色:#e4393c;テキスト装置:なし;パディング:6px 10px;境界線:1px固体電流color; } .bg_color、.bg_two {width:100px;高さ:100px;ボーダー:1pxソリッド#aa00aa; } .main、.main ul {overflow:hidden; } .main {width:400px;マージン:30px Auto; } .main ul li {float:left; }JS
<script>(function(){// 1。ランダムカラーfunction -rgb function getRandomColor(){var rgb = 'rgb('+math.floor(math.random()*255)+'、'+math.floor(math.random()*255)+'、'+math.floor(math.random()*255)+'+ +floor(Math.random()*255) '(RGB) i = 0; i ++){style.backcolor = getRandomColor(); ['0'、 '1'、 '2'、 '4'、 '5'、 '7'、 '9'、 'b'、 'c'、 'e'、 'f'] Math.Floor()res+console(id、res); })()</script>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。