-
Notifications
You must be signed in to change notification settings - Fork 1
/
46-setTimeout-setInterval.html
79 lines (72 loc) · 2.15 KB
/
46-setTimeout-setInterval.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>46-setTimeout-setInterval</title>
</head>
<style>
.alert {
position: fixed;
bottom: 20px;
right: 20px;
margin: 0;
background-color: #fff;
color: #2a2a2a;
border: 1px solid #2a2a2a;
border-radius: 3px;
padding: 24px;
user-select: none;
cursor: pointer;
transform: translateX(calc(100% + 20px));
visibility: hidden;
opacity: 0;
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.alert.success {
border: 1px solid #388e3c;
background-color: #4caf50;
color: #fff;
}
.alert.is-visible {
transform: translateX(0);
visibility: visible;
opacity: 1;
}
.spam {
font-size: 45px;
font-weight: 700;
color: #388e3c;
text-align: center;
}
.timer-ad {
font-size: 75px;
font-weight: 900;
color: #388e3c;
text-align: center;
}
</style>
<body>
<p>
Two seconds after clicking the button, alert specified inside the setTimeout callback will
appear.
</p>
<button type="button" class="btn">Click me - setTimeout</button>
<p>
By clicking on the "Start" button, we will start the interval and output a line to the console
every second. We use Math.random() so that the lines are different. After clicking on the
"Stop" button, we will call clearInterval() and pass the identifier of the interval that needs
to be stopped.
</p>
<button class="btn js-start">Start - setInterval</button>
<button class="btn js-stop">Stop - clearInterval</button>
<!-- NOTIFICATIONS -->
<p class="alert success js-alert">Operation successful!</p>
<!-- spam -->
<button class="js-test-btn" type="button">Test button</button>
<div class="spam js-spam">I`m ad-spam! Hello!</div>
<div class="timer-ad js-timer-ad"></div>
<script src="./app/46-setTimeout-setInterval.js" type="module"></script>
</body>
</html>