[本]278-17日目JavaScriptコードレシピ

9965 ワード
JavaScriptコードフォーミュラ278 テキストリンク
任意の数量の処理
  • 任意の確率でタスクを処理する場合、
  • アニメーションの任意の値は
    • です.
    語句
      Math.random();
    コンソールウィンドウに出力してリフレッシュすると、任意の値が返されます.
      console.log(Math.random());
    実習
    ボタンを押すたびにランダムに色を変えるコードで、Math.random()を理解しましょう.
    index.html
      <button class="button">색상 변경</button>
  <div class="rectangle"></div>
    style.css
      .button {
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 10px;
    color: #000;
    cursor: pointer;
    width: 120px;
  }

  .rectangle {
    width: 300px;
    height: 300px;
    --start: hsl(0, 100%, 50%);
    --end: hsl(322, 100%, 50%);
    background-image: linear-gradient(-135deg, var(--start), var(--end));
  }
    script.js
    window.onload = function () {
  const rectangle = document.querySelector('.rectangle');
  const button = document.querySelector('button');

  clickButton();

  function clickButton() {
    const randomHue = Math.trunc(Math.random() * 360);
    const randomColorStart = `hsl(${randomHue}, 100%, 50%)`;
    console.log(randomColorStart);
    const randomColorEnd = `hsl(${randomHue + 40}, 100%, 50%)`;

    rectangle.style.setProperty('--start', randomColorStart);
    rectangle.style.setProperty('--start', randomColorEnd);
  }

  button.addEventListener('click', clickButton);
}
    sql_mode="の役割:
    jpct_についてaeピット使用