ナンバーズ数字選択アプリ
1
2
3
4
5
6
7
8
9
以下が、HTML、CSS、JavaScriptを使用してナンバーズの数字を選んでくれるアプリを作成するサンプルコードです。今回の要望に基づき、JavaScriptでevalは使用せず、他のサイトへの遷移やリダイレクトは行いません。また、alertも使用しません。
HTML:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ナンバーズ数字選択アプリ</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#numbers {
display: flex;
justify-content: space-between;
margin: 20px auto;
max-width: 600px;
}
.number {
display: inline-block;
width: 50px;
height: 50px;
border: 2px solid black;
text-align: center;
font-size: 30px;
line-height: 50px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.number:hover {
background-color: lightgray;
}
#result {
text-align: center;
font-size: 20px;
margin-top: 20px;
}
#joke {
text-align: center;
font-style: italic;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>ナンバーズ数字選択アプリ</h1>
<div id="numbers">
<div class="number" id="n1">1</div>
<div class="number" id="n2">2</div>
<div class="number" id="n3">3</div>
<div class="number" id="n4">4</div>
<div class="number" id="n5">5</div>
<div class="number" id="n6">6</div>
<div class="number" id="n7">7</div>
<div class="number" id="n8">8</div>
<div class="number" id="n9">9</div>
</div>
<div id="result"></div>
<div id="joke"></div>
<script src="app.js"></script>
</body>
</html>
```
JavaScript:
```
const numbers = document.querySelectorAll('.number');
const result = document.querySelector('#result');
const joke = document.querySelector('#joke');
// ジョークの配列
const jokes = [
"0と1だけ出てきたらコンピューターに壊れていると認識されます。",
"全く同じ数字が3つ以上出た場合、選ばれる確率が上がります。",
"これを選んだあなたは幸運に恵まれるでしょう。",
"おめでとう！ あなたは今日のラッキーナンバーを選びました。",
"ついにあなたにもこころから祝福されるナンバーズ運が訪れました！"
]
// 数字をランダムに選ぶ関数
function pickNumber() {
const pickedNumbers = [];
while (pickedNumbers.length < 5) {
const randomNumber = Math.floor(Math.random() * 9) + 1;
if (!pickedNumbers.includes(randomNumber)) {
pickedNumbers.push(randomNumber);
}
}
return pickedNumbers;
}
// 数字がクリックされたときの処理
function handleClick() {
const chosenNumber = this.textContent;
result.textContent = `選ばれた数字は${chosenNumber}です。`;
joke.textContent = jokes[Math.floor(Math.random() * jokes.length)];
}
// 数字にclickイベントを追加
numbers.forEach(number => {
number.addEventListener('click', handleClick);
});
// 最初のジョークを表示
joke.textContent = jokes[Math.floor(Math.random() * jokes.length)];
// ランダムに数字を選び表示
const pickedNumbers = pickNumber();
pickedNumbers.forEach((number, index) => {
numbers[index].textContent = number;
});
```
CSS:
```
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#numbers {
display: flex;
justify-content: space-between;
margin: 20px auto;
max-width: 600px;
}
.number {
display: inline-block;
width: 50px;
height: 50px;
border: 2px solid black;
text-align: center;
font-size: 30px;
line-height: 50px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.number:hover {
background-color: lightgray;
}
#result {
text-align: center;
font-size: 20px;
margin-top: 20px;
}
#joke {
text-align: center;
font-style: italic;
margin-top: 20px;
}
```
このアプリを実行すると、1から9までの数字がランダムに選ばれ、選択できるようになります。数字をクリックしたときに、選ばれた数字とジョークが表示されます。ジョークはランダムに選ばれ、面白いものが出るかもしれません！