html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body style="background-color:black">
<div id="container">
<div id="box"> </div>
<div id="box1"> </div>
<div id="box2"> </div>
<div id="box3"> </div>
<div id="box4"> </div>
<div id="box5"> </div>
<div id="box6"> </div>
<div id="box7"> </div>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
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
#container {
width: 1000px;
height: 1000px;
background: black;
position: relative;
}
#box {
width: 50px;
height: 50px;
background: red;
position: absolute;
margin-right:5px;
border-radius:50%;
}
#box1 {
width: 50px;
height: 50px;
background: green;
position: absolute;
margin-left:50px;
margin-top:51px;
border-radius:50%;
}#box2 {
width: 50px;
height: 50px;
background: red;
position: absolute;
margin-right:5px;
Enter to Rename, Shift+Enter to Preview
js
js
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
//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
var pos = 0;
//our box element
var box = document.getElementById('box');
var t = setInterval(move, 5);
function move() {
if(pos >= 300) {
clearInterval(t);
}
else {
pos += 1;
box.style.left = pos+'px';
box1.style.left = pos+'px';
box2.style.left = pos+'px';
box3.style.left = pos+'px';
box4.style.left = pos+'px';
box5.style.left = pos+'px';
box6.style.left = pos+'px';
box7.style.left = pos+'px';
}
}
};
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run