<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>おみくじアプリ</title> <style> .wrapper { text-align: center; } .wrapper-button { margin: 20px; } .button { padding: 10px 20px; font-size: 16px; } #result { opacity: 0; transition: opacity 2s; } </style> </head> <body> <div class="wrapper"> <p>おみくじ<br>ボタンをクリックしてください。</p> <div class="wrapper-button"> <button id="button" class="button">おみくじを引く</button> </div> <p id="result"></p> </div> <script> window.onload = function () { const list = { "大吉": {"rate": 10, "msg": "素晴らしい一日になりそうです!"}, "吉": {"rate": 15, "msg": "良いことがありそう!"}, "中吉": {"rate": 20, "msg": "まずまずの運勢です。"}, "小吉": {"rate": 25, "msg": "小さな幸せが訪れそう。"}, "末吉": {"rate": 15, "msg": "何かいいことがあるかも?"}, "凶": {"rate": 10, "msg": "少し注意が必要です。"}, "大凶": {"rate": 5, "msg": "今日は慎重に。"} }; document.getElementById("button").onclick = function () { var resultElement = document.getElementById("result"); var random = Math.floor(Math.random() * 100); var rate = 0; var currentTime = new Date(); var hour = currentTime.getHours(); for(var data in list){ rate += list[data].rate; if(random <= rate){ var message = list[data].msg; // 時間帯によってメッセージを変更 if (hour >= 6 && hour < 12) { message += " 朝の運勢、良いスタートを!"; } else if (hour >= 12 && hour < 18) { message += " 昼の運勢、この調子で!"; } else { message += " 夜の運勢、今日一日を反省。"; } resultElement.textContent = data + " - " + message; resultElement.style.opacity = 1; return; } } } } </script> </body> </html>