血液型・誕生日占い
調子に乗ってまたこんなプログラムを作ってみました。
意外と楽しいと思います。
以下、HTMLとJavaScriptのコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>血液型・誕生日占い</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
select, button {
font-size: 16px;
padding: 10px;
margin: 10px 0;
}
.result {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h1>誕生日占い</h1>
<label for="bloodType">血液型を選んでください:</label>
<select id="bloodType">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="AB">AB型</option>
<option value="O">O型</option>
</select>
<br>
<label for="birthMonth">誕生月を選んでください:</label>
<select id="birthMonth">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7">7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
<br>
<label for="birthday">誕生日を選んでください:</label>
<select id="birthday">
<option value="1">1日</option>
<option value="2">2日</option>
<option value="3">3日</option>
<option value="4">4日</option>
<option value="5">5日</option>
<option value="6">6日</option>
<option value="7">7日</option>
<option value="8">8日</option>
<option value="9">9日</option>
<option value="10">10日</option>
<option value="11">11日</option>
<option value="12">12日</option>
<option value="13">13日</option>
<option value="14">14日</option>
<option value="15">15日</option>
<option value="16">16日</option>
<option value="17">17日</option>
<option value="18">18日</option>
<option value="19">19日</option>
<option value="20">20日</option>
<option value="21">21日</option>
<option value="22">22日</option>
<option value="23">23日</option>
<option value="24">24日</option>
<option value="25">25日</option>
<option value="26">26日</option>
<option value="27">27日</option>
<option value="28">28日</option>
<option value="29">29日</option>
<option value="30">30日</option>
<option value="31">31日</option>
</select>
<br>
<button onclick="tellFortune()">占う</button>
<div class="result" id="result"></div>
</div>
<script>
const bloodFortunes = {
A: "意外と",
B: "思った通り",
AB: "驚くほど",
O: "なぜか"
};
const monthFortunes = {
1: "10年後の自分は",
2: "3年後の自分は",
3: "5年後の自分は",
4: "明日の自分は",
5: "100歳の自分は",
6: "還暦の自分は",
7: "未来の自分は",
8: "1ヶ月後の自分は",
9: "3か月後の自分は",
10: "1年後の自分は",
11: "3秒後の自分は",
12: "1時間後の自分は"
};
const birthdayMessages = {
1: "素敵になる",
2: "セクシーになる",
3: "評価される",
4: "人気がでる",
5: "好かれる",
6: "優しくされる",
7: "誘われる",
8: "笑っている",
9: "お休みが取れる",
10: "夢がある",
11: "元気になる",
12: "健康になる",
13: "モテている",
14: "強くなる",
15: "期待される",
16: "腹が割れている",
17: "ゆとりがある",
18: "褒められる",
19: "愛される",
20: "友達がいる",
21: "お金が貯まる",
22: "応援される",
23: "いじられる",
24: "やる気がある",
25: "楽しんでいる",
26: "美しくなる",
27: "かっこよくなる",
28: "幸せになる",
29: "一人でいる",
30: "何もない",
31: "忙しい"
};
function tellFortune() {
const bloodType = document.getElementById("bloodType").value;
const birthMonth = document.getElementById("birthMonth").value;
const birthday = document.getElementById("birthday").value;
const bloodFortune = bloodFortunes[bloodType];
const monthFortune = monthFortunes[birthMonth];
const birthdayMessage = birthdayMessages[birthday];
const resultMessage = bloodFortune + " " + monthFortune + " " + birthdayMessage + "でしょう。";
document.getElementById("result").textContent = resultMessage;
}
</script>
</body>
</html>この記事が気に入ったらサポートをしてみませんか？