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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
// ########## Mon objet ##########
function MonObjet(){
this.timer = null ;
this.couleur = null;
this.dureeDeVie = null;
this.id = new Date().getTime();
this.AddDiv = function (){
var d = document;
var NewDiv = d.createElement('div');
//( un peu barbare mais bon ;) )
NewDiv.style.backgroundColor = this.couleur;
NewDiv.style.width = "200px";
NewDiv.innerHTML = "Durée de vie restante : " + this.dureeDeVie;//this.dureeDeVie ;
NewDiv.id = this.id ;
var contener = document.getElementById('MesObjets');
//On ajoute l'item en tout premier
contener.appendChild(NewDiv);
}
this.Destruction = function (){
var contener = document.getElementById('MesObjets');
if(document.getElementById(this.id)){
var aSupprimer = document.getElementById(this.id);
contener.removeChild(aSupprimer);
document.getElementById('debug').innerHTML += "<br /> Objet : " + this.id + " vient d'être tué :'( ";
}
else{
document.getElementById('debug').innerHTML += "<br /> Objet : " + this.id + " est déja mort :'( ";
}
}
this.autoDestruction = function (){
if(this.dureeDeVie == 0){
this.Destruction();
}
else{
this.dureeDeVie -= 1;
var moiDiv = document.getElementById(this.id);
var moiObjet = this ;
moiDiv.innerHTML = "Durée de vie restante : " + this.dureeDeVie;
setTimeout(Get_RefFonction(moiObjet,"autoDestruction"),1000);
}
}
this.Initialiser = function (MaCouleur, MaDureeDeVie, AutoDestruct){
this.timer = null ;
this.couleur = MaCouleur;
this.dureeDeVie = MaDureeDeVie;
//alert(this.id);
this.AddDiv();
//Si l'objet est en autodestruction
if(AutoDestruct){
this.autoDestruction();
}
}
}
// ########## Fin de mon objet ##########
function Get_RefFonction( objet, fonction){
return( function(){objet[fonction]()});
}
//Ma collection d'objets
var MesObjetsCollection = new Array();
var TimeLimit = null;
var timerGlobale = null;
//Fonction permettant de gérer ma collection
function AjouterObjetCollection(couleur,dureeVie,autodestruction){
MesObjetsCollection.push(new MonObjet());
var ObjetTemp = MesObjetsCollection[MesObjetsCollection.length-1] //Forcément le dernier ^^
ObjetTemp.Initialiser(couleur,dureeVie,autodestruction);
//Si pas d'autodestruction on appel la méthode DestrucAll()
if(!autodestruction){
TimeLimit = dureeVie;
clearTimeout(timerGlobale);
DestructAll();
}
}
//Fonction permettant de supprimer tous les objets a un interval donné quelque soit leur durée de vie
function DestructAll(){
if(TimeLimit == 0){
//alert("La destruction globale commence \n"+"Nombre d'objet à détruire : "+MesObjetsCollection.length);
var contener = document.getElementById('MesObjets');
for(i = 0, l = MesObjetsCollection.length ; i < l ; i++){
var ObjetTemp = MesObjetsCollection[i] //Forcément le dernier ^^
if(ObjetTemp.dureeDeVie != 0){
ObjetTemp.dureeDeVie = 0 ;
ObjetTemp.Destruction();
}
}
}
else{
TimeLimit--;
document.getElementById('TimeLimite').innerHTML = TimeLimit;
timerGlobale = setTimeout('DestructAll()',1000);
}
}
</script>
</head>
<body>
<div id="MesObjets" style="width:300px; text-align:center; border:1px solid red;position:relative;">
<div id="TimeLimite" style="position:absolute;top:1px;right:-35px; border:1px solid green;width:30px;height:30px;">
</div>
</div>
<div id="debug" style="width:300px; position:absolute;right:10px;top:10px; border:1px solid #666">
</div>
<h4>Objet en auto destruction INDIVIDUELLE</h4>
<a href="#" onclick="AjouterObjetCollection('red',5,true)">Ajouter un objet rouge ( 5 secondes )</a><br />
<a href="#" onclick="AjouterObjetCollection('green',10,true)">Ajouter un objet vert ( 10 secondes )</a><br />
<a href="#" onclick="AjouterObjetCollection('yellow',20,true)">Ajouter un objet jaune ( 20 secondes )</a><br />
<hr />
<a href="#" onclick="alert(MesObjetsCollection.length);">Combien d'objets?</a><br />
<h4>Objet en auto destruction Globale <br /><span style="font-size:9px">(On prend comme durée de vie celle du dernier objet créé)</span></h4>
<a href="#" onclick="AjouterObjetCollection('red',5,false)">Ajouter un objet rouge ( 5 secondes )</a><br />
<a href="#" onclick="AjouterObjetCollection('green',10,false)">Ajouter un objet vert ( 10 secondes )</a><br />
<a href="#" onclick="AjouterObjetCollection('yellow',20,false)">Ajouter un objet jaune ( 20 secondes )</a><br />
</body>
</html> |
