どのようにランダムにJavaScriptの背景色を変更します.

15494 ワード
beginners webdev css javascript テキストリンク

導入
この記事では、どのようにランダムにJavaScriptの組み込み数学関数と16進数のカラーコードを使用して、背景色を変更する方法を学びます.OnClickイベント関数を使用してボタンのアクションをトリガーする方法を学びます.ランダムに変更することができます背景色を変更するには、これが使用されているWebアプリケーションのカップルがあります.

必要条件:
  • はHTML
    • の良い知識を持っています
  • はCSS
    • の良い知識を持っています
  • はJavaScriptの良い知識があります.

    • HTML構造
    プロジェクトを開始するには、indexというHTMLファイルを作成します.HTML .
    bodyタグの
  • は、クラスと呼ばれる
    'コンテナ'.
  • は、第1の部門
    • でもう一つのDIVをつくります
  • そのタイトルでH 1タグを作成します.
  • は、それの中でスパンタグでH 2タグをつくります.スパンタグに' colorcode 'と呼ばれるIDを与えます.スパンタグは、呼び出されるたびにランダムな16進数を保持します.
  • BTN - Colorというクラスのボタン要素を作成する
    • ...
 <body>
    <div class="container">
      <div>
        <h1>Click The Button Below To Generate A Random Hex Color Code.</h1>
        <h2>Your backgroud color is : # <span id="colorCode">0f5257</span></h2>
        <button  class="btn-color">
          Generate Color
        </button>
      </div>
    </div>

  </body>
...

    CSS構造体:
    CSSフォルダを作成し、スタイルと呼ばれるファイルを作成します.CSSは、すべてのCSSを書く場所です.HTMLファイルにCSSをリンクするには、次のようにヘッドタグに追加します.
    ...
<link rel="stylesheet" href="Css/style.css" />
...
    CSSファイルに戻って、次のコードを書きます.注意してくださいには、モバイル画面のこのプロジェクトの構築を開始し、大きな画面のためのスタイルにメディアクエリを使用します.このプロジェクトをより大きな画面に対応させるには、以下のように、min 2 xのmin幅を使用します.
    body {
  padding: 0;
  margin: 0;
  background-color: #0f5257;
}

.container {
  width: 85%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: auto;
}
h1 {
  font-size: 1rem;

}
h2 {
  font-size: 0.9rem;
  margin: 10% 0;
  color: #fff;
}
.btn-color {
  padding: 3% 3%;
  border: none;
  border-radius: 5px;
  color: #0f5257;
  font-size: 1rem;
  cursor: pointer;
}

@media screen and (min-width: 992px) {
  /* For Large Laptops */
  .container {
    width: 100vw;
    margin: auto;
  }
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 1.8rem;
  }
  .btn-color {
    padding: 2% 2%;
    margin: auto;
    font-size: 1.7rem;
    font-weight: bold;
  }
}
    ここでは、モバイル画面のようになります.

    ここでは、大きな画面でどのように見えるかです.

    CSSアニメーションプロパティを使用してH 1タグをアニメーション化します.あなたのCSSでは、H 1セレクタにアニメーションのプロパティを与えて、それを「HexColor」の名前価値に与えてください、それは5 sの間続きます、そして、それは無限の代替でなければなりません.それは色を交互にします.
    ...
h1 {
  font-size: 1rem;
  animation: hexcolors 5s infinite alternate;
}
...
    @ KeyFrame名前の値' HexColors 'を追加します.0 %では、20度で20度で、それは色の色がなければならない40 %で40度で40度で色がなければならない.
    ...
@keyframes hexcolors {
  0% {
    color: #fe5e41;
  }
  20% {
    color: #646e68;
  }
  40% {
    color: #d8f1a0;
  }
  60% {
    color: #0075f2;
  }
  80% {
    color: #c7a27c;
  }
  100% {
    color: #a23b72;
  }
}
...
    H 1テキストの色は以下のように変化し続ける


    JavaScriptの構造
    プロジェクトのJavaScript部分については、
  • JSというフォルダを作成し、インデックスを作成します.それの中のjsファイル.
  • あなたのHTMLコードに移動し、下に見られるようにあなたのJSにリンクします.
    • <script src="./js/index.js"></script>
    JavaScriptファイルの
  • は、handlesubmitという関数を作成し、HexNumberという配列を作成します.
  • 六進数のカラーコードは0から9まで、そしてAからFに始まります.
    • function handleSubmit() {
  let hexNumbers = [
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
  ];
}
  • HexColorCodeという変数を作成し、空の文字列を代入します.これは、生成するすべての16進コードが入るところです.
  • 0から5までの6回実行するループを作成します.このループはあなたのための16進コードを生成します.
  • ランダムなインデックスを生成する変数を作成し、これはランダムな16進数を選ぶのに役立ちます.
  • 場合は、数学を使用して16進数の配列を乗算することができます内蔵数学関数を使用します.ランダム関数.これは10進数を返します.そして、あなたが数学を使用する全部の数に10進数を変えます.コードベースのフロア関数.
  • 次に、以前に作成したHexColorCode内の16進数とランダムインデックス変数を連結します.
    • ...
let hexColorCode = "";
  for (var i = 0; i < 6; i++) {
    let randomIndex = Math.floor(Math.random() * hexNumbers.length);
    hexColorCode += hexNumbers[randomIndex];
  }
...
  • ドキュメントを使用してスパンタグのIDを取得します.GetElementById.これは、ディスプレイ上の16進カラーコードを変更します.また、ドキュメントを使用してボディタグを取得します.GetElementByTagNameボタンをクリックすると、本体の背景色が表示されます.
    • ...
  document.getElementById("colorCode").innerHTML = hexColorCode;
  document.getElementsByTagName("body")[0].style.background =
    "#" + hexColorCode;
    Codepenのコードベースを示します.

    まとめ
    ブラボー!あなたは、このプロジェクトを構築するだけで、2つの組み込み数学機能(ランダムとフロア)を使用する方法を学びました.forループの使い方も学びました.あなたが学んだことを実践する時間です.別の素晴らしいプロジェクトを構築するには、この知識を使用することができます.多くのウェブサイトがランダムにその背景色を変更するので、この知識は間違いなく無駄になりません.
    22日目iOS swift構文🐤
    static block & instance block