天国の扉
1
2
3
<!DOCTYPE html>
<html>
<head>
<title>Heaven's Door</title>
<style>
h1{
font-size: 30px;
text-align: center;
margin: 50px auto;
color: #333;
font-family: Arial, sans-serif;
}
div{
display: inline-block;
width: 30%;
height: 140px;
margin: 50px 1.5%;
border-radius: 10px;
box-shadow: 0px 0px 10px #999;
vertical-align: top;
text-align: center;
font-family: Arial, sans-serif;
}
button{
display: block;
margin: 20px auto;
border-radius: 10px;
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
font-size: 18px;
cursor: pointer;
font-family: Arial, sans-serif;
}
input[type="text"]{
display: block;
margin: 50px auto;
width: 80%;
padding: 10px;
border-radius: 10px;
border: none;
box-shadow: 0px 0px 10px #999;
font-size: 18px;
font-family: Arial, sans-serif;
}
.message{
display: block;
margin: 50px auto;
width: 80%;
padding: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px #999;
font-size: 18px;
color: #900;
text-align: center;
animation: blink 1s infinite;
font-family: Arial, sans-serif;
}
@keyframes blink{
0%{
opacity: 1;
}
50%{
opacity: 0;
}
100%{
opacity: 1;
}
}
</style>
</head>
<body>
<h1>天国の扉</h1>
<div>
<p>1</p>
<button onclick="generateQuote(1)">天国の扉！</button>
</div>
<div>
<p>2</p>
<button onclick="generateQuote(2)">天国の扉！</button>
</div>
<div>
<p>3</p>
<button onclick="generateQuote(3)">天国の扉！</button>
</div>
<input type="text" id="messageBox" placeholder="ここに名言またはシステムメッセージが表示されます" readonly>
<button onclick="reset()">リセット</button>
<script>
const quotes = {
1: [
"今日やろうと思うことを明日に回さないことだ。",
"人が生まれた時は、みんな空を仰いでいる。でも、僕は地面を仰いでいた。",
"あの手この手を使って、とにかく自分を生かす・保つことが大切だということだな。"
],
2: [
"人生とは、自分自身が作るものだ。",
"成功とは、何一つスカスカとした喜びを持たないことだ。",
"勉強は、自分で考えてやるものだ。"
],
3: [
"花は桜木、人もすなるわが恋なれば。―平将門",
"たゆまぬ努力こそが必ずあなたを成功に導く。―織田信長",
"師走の風は物悲しく、山吹の色は輝かしく、雪や枝垂れ梅や睡蓮や仙人掌の緑も多彩に光って。―司馬遼太郎"
],
akiko: "送金は郵便局で"
};
function generateQuote(number) {
const random = Math.floor(Math.random() * quotes[number].length);
if (quotes[number][random].includes("Akiko")) {
document.getElementById("messageBox").innerHTML = "";
document.body.style.backgroundColor = "#900";
document.body.style.animation = "shake 1s cubic-bezier(.36,.07,.19,.97) both";
document.body.onanimationend = function() {
document.body.style.animation = "";
}
setInterval(function() {
document.getElementById("messageBox").innerHTML = "送金は郵便局で";
}, 1000);
} else {
document.getElementById("messageBox").innerHTML = quotes[number][random];
}
}
function reset() {
document.getElementById("messageBox").innerHTML = "";
document.body.style.backgroundColor = "#fff";
document.body.onanimationend = null;
const pTags = document.getElementsByTagName("p");
const numberArray = [1, 2, 3];
for (let i = 0; i < pTags.length; i++) {
const randomNum = Math.floor(Math.random() * numberArray.length);
pTags[i].innerHTML = numberArray[randomNum];
numberArray.splice(randomNum, 1);
}
}
</script>
</body>
</html>