ルーレットアプリ
ルーレットに表示する内容を入力してください(コンマ区切り)
ご要望いただいたアプリ「入力内容を変更できるルーレット」を作成いたしました。以下がプログラムになります。
<!DOCTYPE html>
<html>
<head>
<title>ルーレットアプリ</title>
<meta charset="UTF-8">
</head>
<body>
<h1>ルーレットアプリ</h1>
<p>ルーレットに表示する内容を入力してください(コンマ区切り)</p>
<input type="text" id="items" placeholder="例: あたり,はずれ,おしまい">
<br>
<button onclick="spin()">スピン!</button>
<p id="result"></p>
<script>
function spin() {
// 入力された内容を配列に格納
var items = document.querySelector("#items").value.split(",");
// ルーレットの結果を乱数で決定
var randomIndex = Math.floor(Math.random() * items.length);
// 結果を表示
document.querySelector("#result").textContent = "結果:" + items[randomIndex] + " です!";
}
</script>
</body>
</html>
このアプリでは、入力欄にカンマ区切りでルーレットの表示内容を入力し、スピンボタンをクリックするとルーレットが回り、結果が表示されます。ルーレットの結果は乱数で決定されます。
ジョークとして、「ルーレットが当たったら、おうちde出かけよう!」という文言を表示するなど、家にいながら楽しめるようなアドバイスを表示するなどの工夫ができます。