html
html
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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>
<div id="div" onclick="moveit()">
<p>Click me</p>
</div>
<script>
var id;
var div = document.getElementById("div");
var leftDiv = 100;
var topDiv = 100;
var direction = parseInt(Math.random() * 10) % 3 + 1;
function moveit(){
clearInterval(id);
direction = parseInt(Math.random() * 10) % 3 + 1;
id = setInterval(movebox, 20);
}
function movebox() {
switch (direction) {
case 1:
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
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-image: radial-gradient(lightgreen, green);
}
div {
user-select: none;
display: inline-block;
align-items: center;
justify-content: center;
position: absolute;
left: 100px;
top: 100px;
height: 100px;
width: 100px;
font-size: 20px;
font-family: consolas;
text-align: center;
border: 3px grey solid;
border-radius: 10px;
background-image: radial-gradient(lightblue, blue);
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run