しつこくボタンを押そう!
最初は軽くあしらわれるよ(^_^)
<!DOCTYPE html>
<html>
<head>
<title>しつこくボタンを押そう!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>しつこくボタンを押そう!</h1>
<p id="message">最初は軽くあしらわれるよ(^_^)</p>
<button id="push-button">ボタンを押してみよう!</button>
<script>
let button = document.getElementById("push-button");
let message = document.getElementById("message");
let count = 0;
button.addEventListener("click", function() {
count++;
if (count < 5) {
message.innerText = "もう一回押してみて(・∀・)";
} else if (count < 10) {
message.innerText = "もしもし、Google先生ですけど何かお探しですか?";
} else if (count < 15) {
message.innerText = "ちょっと、押し過ぎじゃないですか?しばらく休憩しましょう(*ノωノ)";
} else {
if (Math.random() > 0.75) {
message.innerText = "おめでとう!あなたは本日ちょっと得する豆知識を手に入れました!スタッフ一同感謝しています(*'ω'*)";
} else {
message.innerText = "もう一回挑戦してみよう!(っ´ω`c)";
}
}
});
</script>
</body>
</html>