Aide javascript

nicolas7474 -
kij_82 Messages postés 4089 Date d'inscription Statut Contributeur Dernière intervention - 4 janv. 2008 à 11:50

Bonjour,
voila j'ai un petit problème:
je désire réaliser une page html qui affiche une grille de loto (pas du type française des jeux, les lotos qu'il y a dans les villages en hiver!) de 10 lignes et 10 colonnes: exemple
1 2 3 4 5 6 7 8 9
10 11 12 13 14 15 16 17 18 19
...
...
80 81 82 83 84 85 86 87 88 89
90

ensuite j'aimerais que lorsque l'on clique sur un numéro, sa case clignote d'une certaine couleur. Ensuite lorsuqu'ne autre case est cliquée, cette case doit à sont tour clignotée d'une certaine couleur et la case qui clignotait avant doit prendre une coloration fixe. Ainsi, on peut connaitre tous les numéros sortis ainsi que le dernier numéro tirée.
Enfin, un bouton doit permettre de réinitialiser la grille neutre pour pouvoir recommencer une partie avec message de confirmation.

Une fonctionnalité intéressante serait de créer une manière de remettre la case vierge si l'utilisateur s'ets trompé de case par exemple (un double clic serait intéressant pour réaliser cela)

Voila, je pense que j'ai été assea clair, j'ai réussi a faire la grille avec <table><tr><td> mais je n'arrive pas a faire clignoter une case ni spécifier comment faire pour que seulement mla denrière clignote!
donc si vous pouviez m'aider, sa serai cool!!

en vous remerciant

Afficher la suite

A voir également:

Aide javascript
Telecharger javascript - Télécharger - Langages
A javascript error occurred in the main process - Forum Handicap / Accessibilté
Afficher un tableau javascript en html ✓ - Forum Javascript
Erreur #125 javascript - Forum Mozilla Firefox
Javascript arrondi - Forum Javascript

3 réponses

Réponse 1 / 3

kij_82 Messages postés 4089 Date d'inscription Statut Contributeur Dernière intervention 857

Bonjour,

Il faut donc bien utiliser du javascript pour faire ce que tu souhaite. Par contre, ce que tu demande est assez long à faire donc je ne pourrai pas tout te donner, mais voici quelques petits trucs.

Pour faire changer de couleur les cases je te conseille de mettre en place une feuille de stylle css dans laquelle tu as plusieurs style comme suit :

.black{
   width: 10px;
   heigth: 10px;
   border-color: black
}
.green {
   width: 10px;
   heigth: 10px;
   border-color: green;
}

Ce ne sont que des exemples.
Ensuite, il te faudrait mettre en place des fonctions javascript qui modifie le style de tes cases. Il faut donc que tu ai un systeme de reconnaissance de ces cases. Tu devra donc avoir un identifiant HTML pour chaque case comme suit :

<table>
    <tr>
        <td><div id="cel1">CONTENU 01</div></td>
        <td><div id="cel2"> ... <...>
        ....
     </tr>
      ...
</table>

Ensuite il faudrait que tu puisse "stocker" virtuellement sous forme d'objet tes cases, en javascript donc, de manière à pouvoir faire des traitement dessus.
Je te conseille donc de crééer une "classe" javascript 'Case' comme suit :

var myGrille = null;

function Case ( id, label ){
     this._id = id;
     this._label = label;
     this._selected = false; // --- Indice de sélection de la case
}

function Grille ( label, nbcases ){
     this._nbcases = 0;
     this._label = label;
     for (var i = 0; i < nbcases; i++ ){
         this[i] = new Case(i, "cel"+i);    // Creation d une nouvelle case avec pour label "cel01", "cel02", etc...
         this._nbcases++;
     }
     this.Display = displayGrille;
}

function displayGrille ( divCentral ){
     var display = "<table>";
     var num = 0;
     for ( var i = 0; i < this._nbcases; i++ ){
         display +="<tr>"
         for ( var j = 0; j < this._nbcases; j++ ){
             num = (i-1) * this._nbcases + j;
             display += "<td><div id='cel"+num+"' onclick='selectBox("+num+",this)' class='black'></div></td>";
         }
         display +="</tr>";
      }
      display += "</table>";
      
     divCentral.innerHTML = display;
}

function selectBox ( num, oDiv ){
    var myBox = myGrille[num];
    if ( myBox._selected == false ){
       oDiv.style.className = "green";
       myBox._selected = true;
    }
    else {
       oDiv.style.className = "black";
       myBox._selected = false;
    }
}

// --- Init the grille
myGrille = new Grille("grille1",10);

Voilà pour ce qui est de la représentation de ta grille en javascript. C'est une grille carré mais tu peux facilement adpaté pour une grille rectangulaire en changeant quelques petits trucs.
C'est un exemple fait vite fait sans avoir vérifier si ca fonctionnait bien, il faut certainement faire un peu de debug (^^), mais tu peux avoir une idée de la facon dont procéder.

Bon courage, si t'as des questions n'hésite pas.

Réponse 2 / 3

nicolas7474

je te remercie pour ta réponse aussi rapide et clair. J'ai cependant une question: comment crée t-on une classe javascript? comme tu me la signifier ou faut-il mettre des balises spécifiques?

en te remerciant
cordialement,

Réponse 3 / 3

kij_82 Messages postés 4089 Date d'inscription Statut Contributeur Dernière intervention 857

Et bien en fait comme il s'agit uniquement de javascript pour la derniere partie, tu peux mettre ca dans un fichier 'grille.js'.
Tu copie le code que j'ai donné plus haut en le mettant entre les balises suivantes :

<script language="javascript">
 var myGrille = null;

function Case ( id, label ){
     this._id = id;
     this._label = label;
     this._selected = false; // --- Indice de sélection de la case
}

function Grille ( label, nbcases ){
     this._nbcases = 0;
     this._label = label;
     for (var i = 0; i < nbcases; i++ ){
         this[i] = new Case(i, "cel"+i);    // Creation d une nouvelle case avec pour label "cel01", "cel02", etc...
         this._nbcases++;
     }
     this.Display = displayGrille;
}

function displayGrille ( divCentral ){
     var display = "<table>";
     var num = 0;
     for ( var i = 0; i < this._nbcases; i++ ){
         display +="<tr>"
         for ( var j = 0; j < this._nbcases; j++ ){
             num = (i-1) * this._nbcases + j;
             display += "<td><div id='cel"+num+"' onclick='selectBox("+num+",this)' class='black'></div></td>";
         }
         display +="</tr>";
      }
      display += "</table>";
      
     divCentral.innerHTML = display;
}

function selectBox ( num, oDiv ){
    var myBox = myGrille[num];
    if ( myBox._selected == false ){
       oDiv.style.className = "green";
       myBox._selected = true;
    }
    else {
       oDiv.style.className = "black";
       myBox._selected = false;
    }
}

</script>

Et ensuite il ne te reste plus qu'à include ce fichier javascript dans ta page PHP / HTML comme suit :

   <?php
      include "grille.js";
   ?>

   
    // --- Pour initialiser ta grille 
    <script language="javascript">
     myGrille = new Grille("grille1",10);
    </script>

Voilà pour l'initialisation de ta grille, pour l'afficher, il te suffit de déclarer une div global et d'invoquer la fonction displayGrille dessus comme suit :

   <?php
      include "grille.js";
   ?>
    <div id="global"></div>
   
    // --- Pour initialiser ta grille 
    <script language="javascript">
     myGrille = new Grille("grille1",10);
     myDiv = document.getElementById("global");
     myGrille.Display(myDiv);
    </script>

Discussions similaires

java script error in the main process

Javascript Arrondi à 2 chiffres après la virgule

javascript:void(0);

Faire un echo dans un script JS

a javascript error occurred in the main process

Votre réponse

Discussions similaires