-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtp2.html
64 lines (53 loc) · 1.46 KB
/
tp2.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
<!DOCTYPE html><!--Déplacement d'un carré rouge mais pas avant un décompte de 10secondes et une possibité de le lancer manuelement-->
<html>
<head>
<meta charset="utf-8" />
<style>
#manuel {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mouvement 5s infinite;
animation-delay: 11s;
}
@keyframes mouvement {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:800px; top:0px;}
50% {background-color:blue; left:800px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p>L'application commencera dans : <div id="le_compteur"></div></p>
<p>Cliquez sur le bouton pour commencer sans plus attentre!</p>
<button onclick="manuel()">Lancer le carré!</button>
<script>
function manuel() {
document.getElementById("manuel").style.animationDelay = "2s";
}
</script>
<div id="manuel"></div>
</body>
<script type="text/javascript">
var interval;
var i =10; //compteur
function timer() {
interval = setInterval(compteur, 1000); //id(que l'on utilise dans le div de l'HTML) = setinterval(nom d'une fonction le callback; inteval(en mms))
}
function compteur() {
var element = document.getElementById("le_compteur");
if(i=>10) {
element.textContent = i;
i--;
if(i<=0) {
element.textContent = i+1;
i=0;
}
}
}
timer();
</script>
</html>