1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<style>
body, html { margin: 0; padding: 0; }
@keyframes move {
from { marign-left: 0; }
to { margin-left: 100px; }
}
</style>
<script>
function addButton() {
const button = document.createElement('button');
button.textContent = 'Click me';
button.style.animation = '3s linear move';
button.style.animationIterationCount = 'infinite';
button.addEventListener('click', () => window.clicked = true);
document.body.appendChild(button);
}
function stopButton(remove) {
const button = document.querySelector('button');
button.style.marginLeft = button.getBoundingClientRect().left + 'px';
button.style.animation = '';
if (remove)
button.remove();
}
let x = 0;
function jump() {
x += 300;
const button = document.querySelector('button');
button.style.marginLeft = x + 'px';
}
function startJumping() {
x = 0;
const moveIt = () => {
jump();
requestAnimationFrame(moveIt);
};
setInterval(jump, 0);
moveIt();
}
</script>
|
