11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je dois réaliser un petit projet et je ne sais pas très bien par ou commencer.

J'ai à ma disposition un bouton (une simple div) cliquable
Je dois calculer le temps entre deux clique successif sur ce bouton
Stocker ce résultat dans une variable (ou un tableau), je compte utiliser les capacité de stockage local du HTML5
Et afficher le résultat en cliquant sur un autre bouton

Si quelqu'un peu me donner les premières pistes à explorer pour faire cela
Modifié par mamax (03 Aug 2011 - 09:27)
Au premier clic que le bouton, tu peux générer et stocker un objet Date.

Au second clic, tu crées un second objet Date et, par simple différence entre ce dernier et le premier, tu obtiens le temps entre les deux clics Smiley smile .

Utiliser le stockage local de HTML5 me parait un peu barbare pour une si petite chose, mais après tout dépend de l'objectif final.
Bon,

Après pas mal de recherche cela fonctionne. Effectivement une variable Global JS fonctionne bien pour stocker les resultats, cependant, je passerais surement par du stockage HTML5 car en JS, si on rafraichi la page, on perd tout...

pour ce qui est du JS voici mon code, pour la compréhension, quand le bouton a été appuyé, je lui ajoute la class "pressed".


/*
 Création d'une variable globale pour l'échange des stats entre les fonctions
 Cette variable est un tableau associatif bidimentionnel définit comme suit:
 Resultat[Nom du bouton][index]

 avec
 Nom du bouton: C'est le nom du bouton affiché sur l'interface
 index: un nombre entier, l'index corespondra à une donnée:
		0 : le nombre total de fois que le bouton est resté appuyé
		1 : la durée total durant laquelle le bouton est resté appuyé
		2 : le timecode au moment duquel le bouton est passé dans l'état "appuyé"
		3 : la durée minimale durant laquelle le bouton est resté dans l'état appuyé
		4 : la durée maximale durant laquelle le bouton est resté dans l'état appuyé
*/
var Resultats = new Array();

// Fonction permettant de génerer le time code ou de calculer la durée d'appuie
// lors d'un changement d'état d'un bouton
function storedata(bouton)
{
	// définition d'une expression régulière afin de déterminé si le bouton était appuyé ou non
	var pressed = new RegExp("pressed","gi");

	// récupération des groupe et de l'etat du bouton
	var listeclasses = bouton.attr('class');
	var nombouton = bouton.text();

	// définition de la variable pour la gestion du timecode
	var timecode = new Date();

	// Si le bouton était initalement à l'état appuyé, on calcul la durée d'appuie
	if (listeclasses.match(pressed))
	{
		var timecode = new Date();
		Resultats[nombouton][1] = Resultats[nombouton][1] + ( timecode.getTime() - Resultats[nombouton][2] );
		// ajout de la durée minimale d'appuie
		if ( Resultats[nombouton][3] == 0 )
		{
			Resultats[nombouton][3] = timecode.getTime() - Resultats[nombouton][2];
		}
		else if ( ( timecode.getTime() - Resultats[nombouton][2] ) < Resultats[nombouton][3] )
		{
			Resultats[nombouton][3] = timecode.getTime() - Resultats[nombouton][2];
		}
		// ajout de la durée maximale d'appuie
		if ( ( timecode.getTime() - Resultats[nombouton][2] ) > Resultats[nombouton][4] )
		{
			Resultats[nombouton][4] = timecode.getTime() - Resultats[nombouton][2];
		}
	}
	// Sinon, on génère un timecode et on incrémente le compteur de clique
	else
	{
		// Ajout du timecode
		
		// Si le bouton n'a jamais été appuyé, on initialises les données associées à ce bouton
		if(typeof(Resultats[nombouton])=='undefined')
		{
			Resultats[nombouton] = new Array(0, 0, 0, 0, 0);
		}
		// On ajoute simplement le time code et on incrémente le compteur de clique
		Resultats[nombouton][0] = Resultats[nombouton][0] + 1;
		Resultats[nombouton][2] = timecode.getTime();
	}
}