以下はJavaScriptを使ったルーレットアプリの実装例です。この例では、evalを使わず、他のサイトへの遷移やリダイレクトはしないようにしています。また、alertも使用していません。ジョーク要素として、ランダムに選ばれる国名を表示する前に、"どこの国でしょうか？"という問いが表示されます。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ルーレットアプリ</title>
<style>
body {
background-color: #EAEAEA;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
button {
background-color: #66CCFF;
padding: 10px;
border: none;
border-radius: 10px;
font-size: 24px;
margin-top: 50px;
cursor: pointer;
}
button:hover {
background-color: #3399FF;
color: #FFFFFF;
}
.result {
font-size: 48px;
margin-top: 50px;
}
</style>
</head>
<body>
<h1>ルーレットアプリ</h1>
<button onclick="spin()">START</button>
<div class="result"></div>
<script>
const countries = ["スペイン", "ポルトガル", "ギリシア", "アンドラ", "サンマリノ", "バチカン市国", "マルタ"];
let isSpinning = false;
function spin() {
if (isSpinning) {
return;
}
isSpinning = true;
const resultDiv = document.querySelector(".result");
resultDiv.innerText = "どこの国でしょうか？";
const spinInterval = setInterval(() => {
const randomIndex = Math.floor(Math.random() * countries.length);
resultDiv.innerText = countries[randomIndex];
}, 100);
setTimeout(() => {
clearInterval(spinInterval);
isSpinning = false;
}, 3000);
}
</script>
</body>
</html>
```
