<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動物時計アプリ</title>
<style type="text/css">
body {
background-color: #EAEAEA;
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
h1 {
font-size: 48px;
color: #FF9966;
margin-top: 50px;
margin-bottom: 0;
}
h2 {
font-size: 24px;
color: #666666;
margin: 10px 0;
}
img {
max-width: 100%;
height: auto;
border-radius: 50%;
box-shadow: 0 0 10px 5px #CCCCCC;
margin-bottom: 10px;
}
.reminder-div {
position: fixed;
background-color: #FFFFFF;
border-radius: 10px;
box-shadow: 0 0 10px 5px #CCCCCC;
padding: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.reminder-div p {
font-size: 18px;
margin: 5px 0;
}
.reminder-div button {
background-color: #FF9966;
color: #FFFFFF;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>動物時計アプリ</h1>
<h2>今日の動物は...</h2>
<img src="" id="animal-img">
<script type="text/javascript">
let animals = ['dog.jpg', 'cat.jpg', 'lion.jpg', 'monkey.jpg', 'bear.jpg'];
let currentAnimal = -1;
function showNextAnimal() {
let randomIndex = Math.floor(Math.random() * animals.length);
while(randomIndex === currentAnimal) {
randomIndex = Math.floor(Math.random() * animals.length);
}
currentAnimal = randomIndex;
document.getElementById('animal-img').src = animals[randomIndex];
}
showNextAnimal();
setInterval(showNextAnimal, 5000);
let currentMonth = new Date().getMonth();
let currentDay = new Date().getDay();
let currentTime = new Date().getTime();
if(currentMonth !== 11 || currentDay === 0 || currentDay === 6 || new Date().getHours() !== 18) {
// do nothing
} else {
let reminderDiv = document.createElement('div');
reminderDiv.className = 'reminder-div';
let messageP = document.createElement('p');
messageP.innerHTML = '月次処理は終わりましたか？';
reminderDiv.appendChild(messageP);
let okButton = document.createElement('button');
okButton.innerHTML = 'OK';
okButton.addEventListener('click', function() {
reminderDiv.style.display = 'none';
});
reminderDiv.appendChild(okButton);
document.body.appendChild(reminderDiv);
setTimeout(function() {
if(reminderDiv.style.display === 'none') {
return;
}
reminderDiv.style.display = 'block';
setTimeout(function() {
if(reminderDiv.style.display === 'none') {
return;
}
alert('月次処理は終わりましたか？');
reminderDiv.style.display = 'block';
}, 15 * 60 * 1000);
}, new Date(new Date().getFullYear(), currentMonth, new Date(new Date().getFullYear(), currentMonth + 1, 0).getDate(), 18, 0, 0, 0).getTime() - currentTime);
}
</script>
</body>
</html>
