728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Roller</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 100vh;
margin: 0;
overflow: hidden;
}
.buttons-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.number-button {
padding: 10px 20px;
font-size: 1em;
margin: 0 5px;
cursor: pointer;
}
.falling-number {
position: absolute;
font-size: 2em;
animation: fall 2s linear;
}
@keyframes fall {
0% { top: -50px; }
100% { top: calc(100vh - 50px); }
}
</style>
</head>
<body>
<div class="buttons-container">
<button class="number-button" onclick="fallNumber(0)">0</button>
<button class="number-button" onclick="fallNumber(1)">1</button>
<button class="number-button" onclick="fallNumber(2)">2</button>
<button class="number-button" onclick="fallNumber(3)">3</button>
<button class="number-button" onclick="fallNumber(4)">4</button>
<button class="number-button" onclick="fallNumber(5)">5</button>
<button class="number-button" onclick="fallNumber(6)">6</button>
<button class="number-button" onclick="fallNumber(7)">7</button>
<button class="number-button" onclick="fallNumber(8)">8</button>
<button class="number-button" onclick="fallNumber(9)">9</button>
</div>
<script>
function fallNumber(number) {
const numberElement = document.createElement('div');
numberElement.classList.add('falling-number');
numberElement.innerText = number;
numberElement.style.left = Math.random() * window.innerWidth + 'px';
document.body.appendChild(numberElement);
numberElement.addEventListener('animationend', () => {
numberElement.remove();
});
}
</script>
</body>
</html>
은가누의 주먹을 보니 이게 가능할 수도 있겠다는 생각이 드네요
한 마리 말에는 무려 열다섯 마리에 해당하는 마력이 들어있다구요 !!
(물론 모두 농담이자 개소리이다)
한 마리 말에는 무려 열다섯 마리에 해당하는 마력이 들어있다구요 !!
(물론 모두 농담이자 개소리이다)
728x90
'호그와트' 카테고리의 다른 글
| pico ctf 이 미띤 넘들 (0) | 2024.07.12 |
|---|---|
| DOM-Based Attacks tryhackme simple write up (0) | 2024.07.11 |
| 전세계 코로나 데이터 분석에 관하여 (3) by 영웅 A to Z (0) | 2024.07.08 |
| 전세계 코로나 데이터 분석에 관하여 (2) by 영웅 A to Z (0) | 2024.07.08 |
| 전세계 코로나 데이터 분석에 관하여 (1) by 영웅 A to Z (0) | 2024.07.08 |