コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

jsでランダムな色を生成するいくつかの方法

高洛峰
リリース： 2016-10-15 16:10:36
オリジナル
1030 人が閲覧しました

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
     <button id="btn1">调用第一种</button>
     <button id="bnt2">调用第二种</button>
     <button id="btn3">调用第三种</button>
     <script>
         var btn1=document.getElementById(&#39;btn1&#39;);
         btn1.onclick=function(){
             document.body.style.background=bg1()
         };
         var btn2=document.getElementById(&#39;bnt2&#39;);
         btn2.onclick=function(){
             document.body.style.background=bg2();
         };
         var btn3=document.getElementById(&#39;btn3&#39;);
         btn3.onclick=function(){
             document.body.style.background=bg3();
         };
         function bg1(){
             return &#39;#&#39;+Math.floor(Math.random()*256).toString(10);
         }
         function bg2(){
             return &#39;#&#39;+Math.floor(Math.random()*0xffffff).toString(16);
         }
         function bg3(){
             var r=Math.floor(Math.random()*256);
             var g=Math.floor(Math.random()*256);
             var b=Math.floor(Math.random()*256);
             return "rgb("+r+&#39;,&#39;+g+&#39;,&#39;+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
         }
     </script>
</body>
</html>
ログイン後にコピー


関連ラベル：
js几种生成随机颜色方法
ソース：php.cn
前の記事：JavaScript クロージャーの簡単な理解 次の記事：JS ブラケット マッチングの問題
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート