Vallinaでランダムな色のフリッパーを構築する方法

13513 ワード

javascript css javascriptprojects tutorial テキストリンク

こんにちは人々と私の第2の記事への歓迎Javascript Project Series , 私がJavaScriptのコーディングスキルをテストして、構築するために、私は10 + JavaScriptプロジェクトを構築するシリーズです.
この2番目の記事では、JavaScriptを使用してカラーフリッパーを構築する方法を学びます.場合は、色のフリッパーが何であるかを知らない場合は、それだけでは、ボタンをクリックすると、ランダムな色にWeb要素の背景を変更する単純なランダムなカラージェネレータです.
注:シリーズ内の各プロジェクトのすべてのコードを私に見つけることができますGitHub すべてのプロジェクトを表示するには、展開リンクhere .

必要条件

私は、あなたが既にHTML、CSS、およびJavaScriptを使用することに慣れていて、JavaScript DOM操作がどのように働くかについての基本的な理解を持っていると仮定するつもりです.
また、数学を使用します.random ()とmathfloat ()関数は、ランダムな色の値を生成します.
と確認して、

どのような色のフリッパーですか？

私が先に述べたように、カラーフリッパーは、クリックするだけで、ランダムな色を生成する機能を実行し、その背景色を選択した要素の背景/色を設定する簡単なボタンを作成する楽しいミニJavaScriptプロジェクトです.
このプロジェクトのために、我々は体の要素の背景色をターゲットにしていると3つの異なる色のコードを使用してそれを変更する;HEX、RGBとHSL.私たちはまた数学を使うつもりです.random ()関数は、数学と組み合わせられます.JavaScriptのfloat ()関数は、色をランダムに生成します.

カラーフリッパー

これをビルドするには、まずコードエディターを開き、indexというファイルを3つ作成します.HTMLスタイル.CSSスクリプト.js

HTMLの追加

我々のインデックスで.HTMLファイル、次のコードを記述します

<!-- header -->
<header>
  <div class="page-header">
    <h1>Color Flipper</h1>

    <div class="page-links">
      <span id="hex-page">HEX</span>
      <span id="rgb-page">RGB</span>
      <span id="hsl-page">HSL</span>
    </div>
  </div>
</header>

<!--* body -->
<main>
  <section class="main-wrapper" id="hex-wrapper">
    <p>Change the background color by clicking this button.</p>
    <button id="hex-color">#babfff</button>
  </section>

  <section class="main-wrapper" id="rgb-wrapper">
    <p>Change the background color by clicking this button.</p>
    <button id="rgb-color">rgb(120, 191, 255)</button>
  </section>

  <section class="main-wrapper" id="hsl-wrapper">
    <p>Change the background color by clicking this button.</p>
    <button id="hsl-color">hsl(26, 100%, 86%)</button>
  </section>
</main>

私たちのHTMLファイルでは、私たちはColor Flipper と呼ばれる3つのリンクを含むdivHEX , RGB , and HSL . また、段落とボタンをクリックして私たちの体の要素の背景を変更するボタンを含む私たちのメインタグの3つのセクションを作成しました.
現時点では、すべての3つのセクションが表示されます、私たちがそれらにCSSスタイルを追加するとき、1つだけが一度に表示されます.そして、JavaScriptを使用すると、我々は、その特定のリンクに対応する各セクションの可視性を切り替えるには、リンクを使用します.また、そのセクションのボタンをクリックして、ページの背景色を変更することもできます.

CSSの追加

では、CSSを追加しましょう.

/** body */
body {
  background-color: #babfff;
  padding: 20px;
}

/** header */
header {
  width: 100%;
  margin: 20px 0;
  text-align: center;
}

/** page links */
.page-links > span {
  font-weight: bold;
  cursor: pointer;
}

/* first-page link */
#hex-page {
  text-decoration: underline;
}

/* second and third-page links */
#rgb-wrapper,
#hsl-wrapper {
  display: none;
}

/** main */
.main-wrapper {
  width: 300px;
  margin: 40px auto;
  text-align: center;
}

button {
  margin: 20px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 110%;
  border: solid 1px grey;
  color: rgb(68, 65, 65);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  cursor: pointer;
}

我々は、我々の体にも現在ボタン(上でBABFFF)に表示されるカラーコードに等しい紫のデフォルト色を与えました.我々は、Hexコードのためにある最初のものを除いてすべてのセクションを隠して、また、このリンクのページが現在活発であることを示すアンダーラインのテキスト装飾を我々の16進リンクに与えました.JavaScriptを使って機能を追加しましょう.

JavaScriptの追加

JavaScriptファイルでは、まず変数を作成します.

//* variables
// selecting the body element
const changeBackground = document.body;

// selecting the links to change the page
const hexPage = document.getElementById("hex-page");
const rgbPage = document.getElementById("rgb-page");
const hslPage = document.getElementById("hsl-page");

// selecting the main wrappers
const hexWrapper = document.getElementById("hex-wrapper");
const rgbWrapper = document.getElementById("rgb-wrapper");
const hslWrapper = document.getElementById("hsl-wrapper");

// selecting the buttons to change the background
const hexColor = document.getElementById("hex-color");
const rgbColor = document.getElementById("rgb-color");
const hslColor = document.getElementById("hsl-color");

そのために、ページリンクの関数を書きましょう.

//* adding event listener and function to the color page links
// hex page
hexPage.addEventListener("click", function () {
  if (hexPage.style.textDecoration != "underline") {
    hexWrapper.style.display = "block";
    rgbWrapper.style.display = "none";
    hslWrapper.style.display = "none";
    hexPage.style.textDecoration = "underline";
    rgbPage.style.textDecoration = "none";
    hslPage.style.textDecoration = "none";

      // changes the background color

   changeBackground.style.backgroundColor = hexColor.textContent;
  }
});

// rgb page
rgbPage.addEventListener("click", function () {
  if (rgbPage.style.textDecoration != "underline") {
    rgbWrapper.style.display = "block";
    hexWrapper.style.display = "none";
    hslWrapper.style.display = "none";
    rgbPage.style.textDecoration = "underline";
    hexPage.style.textDecoration = "none";
    hslPage.style.textDecoration = "none";

    // changes the background color
    changeBackground.style.backgroundColor = rgbColor.textContent;
  }
});

// hsl page
hslPage.addEventListener("click", function () {
  if (hslPage.style.textDecoration != "underline") {
    hslWrapper.style.display = "block";
    rgbWrapper.style.display = "none";
    hexWrapper.style.display = "none";
    hslPage.style.textDecoration = "underline";
    rgbPage.style.textDecoration = "none";
    hexPage.style.textDecoration = "none";

 // changes the background color
changeBackground.style.backgroundColor = hslColor.textContent;
  }
});

それぞれの関数は、ページリンクをクリックすると、クリックされたリンクがアンダーラインされているかどうかをチェックします.
また、ページ/セクションに表示され、その色にページの背景色を設定するボタンに表示されているカラーコードを受け取ります.
次に、私たちのボタンに機能を追加しています.私たちは数学を使います.random ()とmathこれらの関数はfloat ()関数です.しかし、その前に、私が簡単に彼らが何をするかについて説明させました.

数学。random ()とmathfloat ()関数

数学.random ()関数は、常に0から1までの10進数を返します.指定した数の範囲内で乱数を生成したい場合は、0から10までを指定します.次に、10で生成された10進数を掛けます.
数学.float ()は、数学と組み合わせた場合です.random ()は、全体の数値に番号を下げます.

console.log(Math.random())
// logs out 0.5408145050563944

console.log(Math.random() * 10)
// logs out 5.408145050563944

console.log(Math.floor(Math.random() * 10))
// logs out 5

あなたはそれらの上で記事を読むことができますResources Section . 今すぐ私たちのボタンに戻る.

ボタンの色ジェネレータ

16進数のカラーコードは、私のa 'を与えられる6つの文字で構成されます.16進数の文字は常に' 0 'と' 9 'の間の数字または' a 'と' f 'の間の文字です.
我々はランダムに6文字を生成し、一緒にランダムな16進数のカラーコードを取得する文字列.以下のJavaScriptコードをコピーします.

//* adding event listener and function to the color buttons
// hex button
// array of values for the background color
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
// a random number value
let randomNumberValue;

hexColor.addEventListener("click", function () {
  // saves the new background color
  let hexColorValue = "#";
  // randomly picks a value in the array and adds it to the background color above
  for (let i = 0; i < 6; i++) {
    randomNumberValue = Math.floor(Math.random() * hex.length);
    hexColorValue += hex[randomNumberValue];
  }
  // changes the text inside the button
  hexColor.textContent = hexColorValue;
  // changes the background color
  changeBackground.style.background = hexColorValue;
});

まず、配列を作成しましたhex , HEXコードを作成するために使用されるすべての16進文字を含みます.この配列からランダムな文字を取得します.
次は呼び出される変数ですrandomNumberValue . この変数は生成するランダム文字を一時的に格納します.
その後、我々はボタンをクリックするといつでも実行する関数を作成しました.
この関数では、hexColorValue , を使用して生成された16進数コードを保存します.最初にその値は'として' Cherchen 'が、我々は6つのランダムな16進数の文字を生成するとして、彼らは16進数の色のコードを与えるためにhexcolorvalueに追加されます(すなわち'私たちは安くなる).
我々のために.ループ関数は、我々は現在、0と16(ここで16は私たちの配列の長さ)の間に該当する乱数を生成する数学を組み合わせることによって.random ()とmathfloat ()関数.この番号は配列の各文字の位置を表します.
番号が生成されると、その配列の位置に格納されている文字は、現在のhexcolorValueに追加されます.それで、乱数が生成されるならば、5であるならば、配列のその位置が5である、そして、我々の乱数が15であるならば、我々の16進の性格は' 4 'です.
一度、すべての6文字を生成します.ループは、同時に私たちのhexcolorvalueにそれらを追加し、私たちのボタンのテキストと私たちのページの背景色は、それから私たちのhexcolorvalueに設定されます.そして、もう一度ボタンをクリックすると、全体のプロセスが繰り返される.
次はRGBボタンです.

RGBボタンカラージェネレータ

RGBのカラーコードは0から255までの3つの値で構成されている.3つの値は赤、緑、青の色合いを表し、それはRGBの略です.
我々はこれらの3つの値の乱数を生成し、順番にランダムなRGBのカラーコードを生成するために使用します.以下のJavaScriptコードをコピーします.

// rgb button
rgbColor.addEventListener("click", function () {
  // randomly picks a number between 0 and 255
  let a = Math.floor(Math.random() * 256);
  // randomly picks a number between 0 and 255
  let b = Math.floor(Math.random() * 256);
  // randomly picks a number between 0 and 255
  let c = Math.floor(Math.random() * 256);
  // saves the new background color
  const rgbColorValue = `rgb(${a}, ${b}, ${c})`;
  // changes the text inside the button
  rgbColor.textContent = rgbColorValue;
  // changes the background color
  changeBackground.style.background = rgbColorValue;
})

したがって、この関数ではa , b and c , 0から256の間の乱数を生成します.各変数はRGBカラーコードの値の1つを表します.
次に変数と呼ばれる変数がありますrgbColorValue これはRGBのカラーコードを表します.私たちは、A、B、Cに格納された3つの値を取り、RGbColorValueが等しいテンプレートリテラルでそれらを使用しています.
一旦それがされるならば、機能はそれから我々のボタンのテキストと我々のページの背景色を生成されたRGBColorValueに置き換えます.
255の代わりに乱数を256倍したことに気づいたかもしれません.これは、私たちが255を使用するなら、関数は255未満で乱数を与えますが、実際の255ではありません.ですから、255を乱数としたい場合は、1を256にする必要があります.

ボタンカラージェネレータ

HSLカラーコードも3値で構成されますが、値と範囲が異なります.彼らが表す3つの値は色相、彩度と明度です.
色相値は0〜360度であり、飽和度と明度は0〜100 %である.
私たちのコードは、我々のRGBボタンカラージェネレータのそれと類似しているように見えます.

// hsl button
hslColor.addEventListener("click", function () {
  // randomly picks a number between 0 and 360
  let a = Math.floor(Math.random() * 361);
  // randomly picks a number between 0 and 100
  let b = Math.floor(Math.random() * 101);
  // randomly picks a number between 0 and 100
  let c = Math.floor(Math.random() * 101);
  // saves the new background color
  const hslColorValue = `hsl(${a}, ${b}%, ${c}%)`;
  // changes the text inside the button
  hslColor.textContent = hslColorValue;
  // changes the background color
  changeBackground.style.background = hslColorValue;
});

ここではまた、私たちの色相、彩度と明度のための数の範囲内の3つのランダムな値を生成し、それらを保存しているa , b and c それぞれ.
そして、生成された値を受け取り、変数hslColorValue HSLカラーコードを表します.
我々のボタンのテキストと一緒の我々のページの背景色は、それからHSLColorValueの値にセットされます.
そして、それはそれと同じくらい簡単です.