😀
🎉
👍
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
@keyframes pop {
50% {transform: scale(1.5);}
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; position: relative; overflow: hidden; border: 2px solid #000; background: #f0f0f0; margin: 0 auto;">
<div id="emoji1" style="position: absolute; top: 20px; left: 50px; font-size: 2em; animation: spin 5s linear infinite;">😀</div>
<div id="emoji2" style="position: absolute; top: 100px; left: 150px; font-size: 2em; animation: bounce 2s infinite;">🎉</div>
<div id="emoji3" style="position: absolute; top: 200px; left: 250px; font-size: 2em; animation: pop 3s infinite;">👍</div>
<input id="numberInput" type="number" style="position: absolute; bottom: 50px; left: 100px; width: 200px; height: 40px; font-size: 1.5em; text-align: center;" placeholder="Enter a number">
<div id="output" style="position: absolute; bottom: 10px; left: 100px; width: 200px; height: 40px; font-size: 1.5em; text-align: center;"></div>
</div>
<script>
function findNumber() {
let input = document.getElementById('numberInput').value;
if (input) {
let half = input / 2;
let number = Math.cbrt(half);
document.getElementById('output').textContent = "結果: " + number.toFixed(2) + " 😃";
localStorage.setItem('lastInput', input);
}
}
document.getElementById('numberInput').addEventListener('change', findNumber);
document.getElementById('numberInput').addEventListener('touchend', findNumber);
window.onload = function() {
let lastInput = localStorage.getItem('lastInput');
if (lastInput) {
document.getElementById('numberInput').value = lastInput;
findNumber();
}
};
</script>
</body>
</html>