<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>今日のラッキーカラー診断</title> <style> #color-box { width: 200px; height: 200px; border: 1px solid #ccc; margin-bottom: 10px; } </style> </head> <body> <div id="color-box"></div> <button id="generate-btn">診断</button> <button id="reset-btn">リセット</button> <div id="color-code"></div> <script> const colorBox = document.getElementById("color-box"); const generateBtn = document.getElementById("generate-btn"); const resetBtn = document.getElementById("reset-btn"); const colorCode = document.getElementById("color-code"); resetBtn.addEventListener("click", function() { colorBox.style.backgroundColor = "#fff"; colorCode.textContent = ""; }); function generateColor() { const letters = "0123456789ABCDEF"; let color = "#"; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } colorBox.style.backgroundColor = color; colorCode.textContent = color; } generateBtn.addEventListener("click", function() { generateColor(); }); </script> </body> </html> ※ジョークを取り入れる場合は、generateColor()関数内に以下のようなコードを追加すると良いでしょう。 if (Math.random() < 0.1) { alert("今日のラッキーカラーは[色名]です!"); }