🎉✨ワクワクカレンダー📅🎈
今日の日付: --/--/---- 📆😊
計算結果: --/--/---- 🎊💫
🌟
🎈
✨
🎉
💖
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
@keyframes bounce {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@keyframes sparkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.floating {
animation: float 3s ease-in-out infinite;
position: absolute;
font-size: 24px;
}
.bounce {
animation: bounce 0.5s ease;
}
.sparkle {
animation: sparkle 1s infinite;
}
</style>
</head>
<body>
<div style="width:400px; height:400px; border:2px solid #FFD700; border-radius:10px; margin:20px auto; padding:20px; box-sizing:border-box; background:linear-gradient(135deg, #FFDEE9 0%, #B5FFFC 100%); position:relative; overflow:hidden;">
<div style="font-size:24px; text-align:center; margin-bottom:10px;">🎉✨ワクワクカレンダー📅🎈</div>
<div style="text-align:center; font-size:16px; margin-bottom:10px;">
今日の日付: <span id="today">--/--/----</span> 📆😊
</div>
<div style="text-align:center; margin-bottom:10px;">
<input type="number" id="weeks" placeholder="何週後?" style="font-size:16px; padding:5px; width:100px; border:1px solid #ccc; border-radius:5px;" />
<button id="calcBtn" style="font-size:16px; padding:5px 10px; margin-left:10px; border:none; background-color:#FF69B4; color:white; border-radius:5px; cursor:pointer;">計算🔢</button>
</div>
<div id="numberButtons" style="text-align:center; margin-bottom:10px; display:none;">
<button class="numBtn" data-num="1" style="font-size:18px; padding:5px; margin:2px; border:none; background-color:#87CEEB; border-radius:5px; cursor:pointer;">1️⃣</button>
<button class="numBtn" data-num="2" style="font-size:18px; padding:5px; margin:2px; border:none; background-color:#87CEEB; border-radius:5px; cursor:pointer;">2️⃣</button>
<button class="numBtn" data-num="3" style="font-size:18px; padding:5px; margin:2px; border:none; background-color:#87CEEB; border-radius:5px; cursor:pointer;">3️⃣</button><br/>
<button class="numBtn" data-num="4" style="font-size:18px; padding:5px; margin:2px; border:none; background-color:#87CEEB; border-radius:5px; cursor:pointer;">4️⃣</button>
<button class="numBtn" data-num="5" style="font-size:18px; padding:5px; margin:2px; border:none; background-color:#87CEEB; border-radius:5px; cursor:pointer;">5️⃣</button>
<button class="numBtn" data-num="6" style="font-size:18px; padding:5px; margin:2px; border:none; background-color:#87CEEB; border-radius:5px; cursor:pointer;">6️⃣</button><br/>
<button class="numBtn" data-num="7" style="font-size:18px; padding:5px; margin:2px; border:none; background-color:#87CEEB; border-radius:5px; cursor:pointer;">7️⃣</button>
<button class="numBtn" data-num="8" style="font-size:18px; padding:5px; margin:2px; border:none; background-color:#87CEEB; border-radius:5px; cursor:pointer;">8️⃣</button>
<button class="numBtn" data-num="9" style="font-size:18px; padding:5px; margin:2px; border:none; background-color:#87CEEB; border-radius:5px; cursor:pointer;">9️⃣</button><br/>
<button class="numBtn" data-num="0" style="font-size:18px; padding:5px; margin:2px; border:none; background-color:#87CEEB; border-radius:5px; cursor:pointer;">0️⃣</button>
<button id="clearBtn" style="font-size:18px; padding:5px; margin:2px; border:none; background-color:#FF6347; color:white; border-radius:5px; cursor:pointer;">🗑️</button>
</div>
<div style="text-align:center; font-size:16px;">計算結果: <span id="result">--/--/----</span> 🎊💫</div>
<!-- Floating Emojis -->
<div class="floating" style="top:10px; left:20px; animation-delay:0s;">🌟</div>
<div class="floating" style="top:50px; left:150px; animation-delay:1s;">🎈</div>
<div class="floating" style="top:100px; left:300px; animation-delay:2s;">✨</div>
<div class="floating" style="bottom:20px; left:50px; animation-delay:1.5s;">🎉</div>
<div class="floating" style="bottom:50px; left:200px; animation-delay:2.5s;">💖</div>
</div>
<script>
const todaySpan = document.getElementById('today');
const resultSpan = document.getElementById('result');
const calcBtn = document.getElementById('calcBtn');
const weeksInput = document.getElementById('weeks');
const numberButtons = document.getElementById('numberButtons');
const numBtns = document.querySelectorAll('.numBtn');
const clearBtn = document.getElementById('clearBtn');
const divContainer = document.querySelector('div');
// Display today's date
const today = new Date();
const formattedToday = today.getFullYear() + '/' +
String(today.getMonth()+1).padStart(2, '0') + '/' +
String(today.getDate()).padStart(2, '0');
todaySpan.textContent = formattedToday;
// Show number buttons on mobile
function checkMobile() {
if (window.innerWidth <= 600) {
numberButtons.style.display = 'block';
} else {
numberButtons.style.display = 'none';
}
}
window.addEventListener('resize', checkMobile);
checkMobile();
// Handle number button clicks
numBtns.forEach(btn => {
btn.addEventListener('click', () => {
const num = btn.getAttribute('data-num');
weeksInput.value += num;
animateClick(btn);
});
});
// Handle clear button
clearBtn.addEventListener('click', () => {
weeksInput.value = '';
animateClick(clearBtn);
});
// Calculate button click
calcBtn.addEventListener('click', () => {
const weeks = parseInt(weeksInput.value);
if (isNaN(weeks)) {
alert('有効な週数を入力してください！');
return;
}
const futureDate = new Date();
futureDate.setDate(today.getDate() + weeks * 7);
const formattedFuture = futureDate.getFullYear() + '/' +
String(futureDate.getMonth()+1).padStart(2, '0') + '/' +
String(futureDate.getDate()).padStart(2, '0');
resultSpan.textContent = formattedFuture;
animateResult();
});
// Animate buttons on click
function animateClick(element) {
element.classList.add('bounce');
setTimeout(() => {
element.classList.remove('bounce');
}, 500);
}
// Animate result
function animateResult() {
resultSpan.classList.add('sparkle');
setTimeout(() => {
resultSpan.classList.remove('sparkle');
}, 1000);
}
// Add click animations to container
divContainer.addEventListener('click', (e) => {
if (e.target.tagName !== 'BUTTON' && e.target.tagName !== 'INPUT') {
const emoji = document.createElement('span');
emoji.textContent = '🎊';
emoji.style.position = 'absolute';
emoji.style.left = e.clientX - divContainer.getBoundingClientRect().left + 'px';
emoji.style.top = e.clientY - divContainer.getBoundingClientRect().top + 'px';
emoji.style.fontSize = '24px';
emoji.style.animation = 'float 2s ease forwards';
divContainer.appendChild(emoji);
setTimeout(() => {
divContainer.removeChild(emoji);
}, 2000);
}
});
</script>
</body>
</html>
```