ブラウザに100*100pxの四角を表示して、クリックする度に色がランダムに変わるサンプル。こうやってJS/CSSを組み合わせるとフロントエンド感ある。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js test</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: skyblue;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="color" id="color">skyblue</div>
  <div class="box" id="target"></div>
  <script>
    'use script';
    function changeColor(){
      // #000000-#ffffffをランダムで出力
      var randomColor = "#" + ('000000' + Math.floor(Math.random() * (2**24)).toString(16)).slice(-6);
      // 文字列と色で表示する。
      document.getElementById('color').textContent= randomColor;
      document.getElementById('target').style.background = randomColor;
      //document.getElementById('target').style.borderRadius = '50%';
    }
    // 最初にランダムな色を設定
    window.addEventListener('load', changeColor, false);
    // クリックされた時もランダムな色を設定
    document.getElementById('target').addEventListener('click', () => {changeColor(); });

  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

.box{

width: 100px;

height: 100px;

background-color: skyblue;

cursor: pointer;

}

</style>

</head>

<body>

<div class="color" id="color">skyblue</div>

'use script';

function changeColor(){

// #000000-#ffffffをランダムで出力

var randomColor = "#" + ('000000' + Math.floor(Math.random() * (2**24)).toString(16)).slice(-6);

// 文字列と色で表示する。

document.getElementById('color').textContent= randomColor;

document.getElementById('target').style.background = randomColor;

//document.getElementById('target').style.borderRadius = '50%';

}

// 最初にランダムな色を設定

window.addEventListener('load', changeColor, false);

// クリックされた時もランダムな色を設定

document.getElementById('target').addEventListener('click', () => {changeColor(); });

</script>

</body>

</html>

関連記事