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> |
Partager