[RESOLU][javascript] fusionner 2 boutons

Tout d’abord désolé si je ne suis pas dans la bonne catégorie, mais je pense être à la bonne place.
Voilà je voudrais créer une petite “interface” (enfin un bouton quoi B)) qui

  1. ouvre une url
    et
  2. fasse un compte à rebours à 2 minutes à partir du moment où on a cliqué dessus.

J’ai donc déjà eu un peu d’aide sur irc, et il faut apparemment faire ça en javascript, j’ai donc pu faire mes deux boutons comme ceci :

[code]

[/code] Puis plus loin les boutons 1 et 2 [code]

[/code]

Donc plusieurs questions :

  1. j’aurai bien aimé avoir un décompte qui s’affiche (temps écoulé et temps restant) sur la page html plutôt qu’une boite de dialogue qui s’ouvre à l’issue de délais : est-ce possible? (et pas trop compliqué ? ^^)
  2. je voudrais “fusionner” ces deux boutons. J’ai essayé diverses bidouilles, et cherché sur le net, mais rien n’a fonctionné (url qui s’ouvre plusieurs fois, décompte qui ne fonctionne pas…)

Précision importante : je suis un très gros noob, je n’y connais rien et j’ai juste c/c les codes ci-dessus et adapté les url/texte.

Merci B)

edit: adresse ip et mac en clair >_<

Tu peux créer une fonction appellée par le boutton, pour avoir par exemple quelque chose comme ça :

[code][/code]

Que tu appellera avec la propriété onclick du boutton.

euh, rapidement, tu pourrais éditer l’ip et l’adresse mac dans ton url stp ? B) (quel boulet >_<).

Je regarderai ça tout à l’heure, merci.

edit: merci pour l’ip et mac B).

je suis en train de tester mais ej crois qu’il aime pas avoir le “while” vide " (“un script sur cette page est peut être occupé ou ne réponde plus: arrêter le script/continuer”).
en tout cas le bouton m’ouvre bien l’url, c’est déjà ça.

En fait dans le while j’avais ajouté un timeout qui appelle une fonction de mise à jour de l’affichage avec un délais d’une seconde, puis une incrémentation de ElapsedTime pour arriver aux 120 secondes.
Sauf que la mise à jour ne se met pas à jour, et elapsedTime joue au yoyo …

[n00b]
ahh okaaayy. En fait faut mettre les 2 dans la même fonction, c’est logique en fait ^^.

[code]function MonBoutton()
{

  window.open("http://wakeonwan.free.fr/wakeup.php?ip=xxxx&mac=xxxx");

var t=setTimeout(“alert(‘Le PC est démarré !’)”,120000)
}[/code]

[/n00b]

Donc reste plus que l’affichage pour remplacer la boite de dialogue (c’est ça que tu essaye de faire avec elapsedTime si j’ai bien compris?).

Oui tout à fait, en fait en JS tu as une méthode “innerHTML” qui permet de modifier la source d’un élément.
Exemple: document.getElementById(‘pouet’).innerHTML = “nouveau paragraphe”;
Bref, si tu trouve avant moi … (je me remet là dessus plus tard)

J’ai trouvé un truc qui se rapproche : http://fr.selfhtml.org/javascript/exemples…uree_sejour.htm
On ne peux pas directement chronométrer, il faut obligatoirement se référer à une heure “réelle” ?!

Bon en fait on m’a confirmé ce que je pensais, c’est la faute à setTimeout, qui n’est pas blocant.
Bref petite démo du truc fini par ici.
J’ai eu la flemme de faire la page complete avec un select et ou un prompt d’ip etc … je te laisse le faire, c’est mieux pour l’égo B)

sur la page je met un timer de 10 secondes pour que ça aille plus vite à défiller, mais c’est juste une constante à modifier. (oui ça va, une variable).
code ici quand même :

[code]

<title>Pitite demo</title>

<script type="text/javascript">
<!--
	var Delay = 120;

	function rebour()
	{
		update('plop');
	}

	function FormatTime(temps)
	{
		return String(parseInt(temps/60)) + " minutes " + String(parseInt(temps%60)) + " secondes.";
	}

	function $(e)
	{
		return document.getElementById(e);
	}

	function update(elem)
	{
		$(elem).innerHTML = FormatTime(Delay);
	}
	
	function tick()
	{
		Delay--;
		update('plop', Delay);
		if (Delay) 
			setTimeout('tick()', 1000);
		else
		{	
			alert('Machine démarrée.');
			return;
		}
	}
-->
</script>
<div id="plop"></div><br /><input type="button" onclick="java script:tick();" value="Start !" />
[/code]

Waouh, merci !
j’y suis depuis tout à l’heure, et j’arrivais à rien :sweat:.
En fait ça me parait bizarre qu’un truc si simple demande tant de lignes de code (bon y’a pas non plus énormément de lignes, mais je pensais que ça se faisais en 3, 4 voire 5 linges).

Je lis un peu le code (histoire de comprend quand même, je suis un noob mais j’essaye de me soigner), et j’adapte ça (bon y’a juste à ouvrir la page, ca devrait pas être bien compliqué ^^)

Bof en fait ça pourrait être condensé, mais là je trouve ça plus clair.
la fonction update met à jour le div plop avec le temps “Delay” finallement une variable globale, en appellant la fonction FormatTime pour écrire en joli.
à chaque tick on appelle le tick suivant jusqu’a ce qu’on arrive à 0.
en fait le setTimeout ne “bloque” pas, c’est pour ça que la boucle de tout à l’heure merdait.

pour info le code de ta page fonctionne, mais pas celui que tu as c/c ici (j’ai pas comparé pour savoir ce qui n’allait pas, bref).
edit : c’est ta ligne "

> “java script” au lieu de “javascript”

Sinon je ne sais pas trop où placer mon “window.open(“http://wakeonwan.free.fr/wakeup.php?ip=…”);”.
J’ai voulu le mettre dans function tick(), mais évidemment ça l’ouvre à chaque maj (toutes les secondes). Donc j’ai fait ça :

[code]var Open = 0;

function tick()
{
if (Open==0) window.open(“http://wakeonwan.free.fr/wakeup.php?ip=…”);
Open++;

		Delay--;
		update('plop', Delay);
		if (Delay) 
			setTimeout('tick()', 1000);
		else
		{	
			alert('Machine démarrée.');
			return;
		}
	}[/code]

Ca fonctionne, mais mon instinct me dit que c’est un poil sale/bourrin/dégeux.
Il n’y aurait pas une autre solution par hasard ?

edit: et j’avais oublié le “;” après Open++, mais le code fonctionnait malgré tout, c’est normal ?

Tu ne peux pas “directement chronométrer” dans une boucle genre for ou while, parce que le browser est bloqué le temps que ton code soit fini d’exécuter. Une boucle empêcherait le browser de se rafraichir pour afficher ce que tu lui demande.
L’intérêt de la fonction setTimeout, c’est qu’elle n’est pas blocante: JS effectue son décompte en parallèle au browser. Donc ton code peut etre appelé apres un certain temps, ou régulièrement, sans empêcher le bon fonctionnement du reste.

w3schools est rempli d’exemples et de tutorials bien foutus.

http://www.w3schools.com/js/js_examples.asp

Si tu regardes vers le bas, tu as les exemples de timing. En particulier:

http://www.w3schools.com/js/tryit.asp?file…js_timing_clock

Je crois que c’est plus ou moins exactement ce que tu veux…

Dans ton cas, le plus simple serait d’utiliser un code comme celui-ci:

[code]

destTime = 0; //heure de la fin de la boucle, initialisée a 0
	function buttonFunc()
	{
		now = new Date();
		destTime = now.getTime() + 10000;	  //mettre la dest a "maintenant + 10s"
		onTime();
	}
	
	function onTime()
	{
		now = new Date();
		remainingTime = destTime - now.getTime();
		if (remainingTime <= 0)   // si le temps est écoulé
		{
			document.getElementById("timeField").innerHTML = "Temps restant: " + 0 + "s";
			alert("Temps écoulé.");
		}
		else
		{
			document.getElementById("timeField").innerHTML = "Temps restant: " + Math.round(remainingTime/1000) + "s";
			t = setTimeout("onTime()", 1000);
		}
	}
</script>

Temps restant:

<input type="button" onClick="buttonFunc()" value="Press me!"/>
[/code]

new Date() crée un objet Date fixé à l’heure actuelle
getTime renvoie le nombre de millisecondes écoulées depuis le 1er janvier 1970 (il faut bien choisir une référence!)

Ensuite tu peux comparer la différence entre un temps fixé à l’avance et le temps actuel. Pourquoi faire un chrono alors que ton ordi s’acharne a compter les secondes pour toi ? B)

Edit: Wah, il m’a fallu au moins 40 minutes pour écrire ca… et on t’a trouvé un solution entre-temps.

En fait c’est plutôt un chronomètre que je cherchais à faire B). Mais merci, je vais aussi essayer d’étudier ce code. Qui sais, je finirais peut être par comprendre ^^.

edit : ajout de la balise [RESOLU].
Merci B)

astro > chrono ou compte à rebour c’est pareil, ya juste qu’il faut ++ dans un cas et – dans l’autre.
sinon ton open machin met le dans “rebour” ça sera exécuté qu’une fois.

Le probleme, c’est qu’il n’y a pas de moyen d’avoir une vraie précision dans un décompte en JS. JS n’est pas un processus prioritaire de ton systeme. En supposant qu’une app commence à bouffer du proç, tu perdras un bon nombre de secondes. C’est pourquoi on utilise généralement le temps système, qui lui ne faiblit (quasiment) jamais. C’est vrai en JS, mais aussi dans d’autres langages (Java par exemple). Qu’on me corrige si je me trompe, mais les timers des API standards des OS utilisent aussi l’horloge interne…
C’est vraiment la méthode la plus simple et surtout la plus fiable.

[quote=“fser, post:14, topic: 45750”]astro > chrono ou compte à rebour c’est pareil, ya juste qu’il faut ++ dans un cas et – dans l’autre.
sinon ton open machin met le dans “rebour” ça sera exécuté qu’une fois.[/quote]

Dans rebour, c’est pas executé :/.
Sinon pour moi chrono : comptage (1, 2, 3 …) et compte à rebours c’est "temps restant avant date x="
LodeRunner: je comprend pour la précision, mais je suis pas à 2-3 secondes près ici B).

tu peux compter ce que tu veux, il suffit de savoir ce que tu veux exactement

pour chronometrer, tu mesures le temps entre le moment présent et le lancement du chrono.
pour un compte a rebour, c’est la différence entre le moment présent et un moment futur prédéterminé.

ce qui est exactement la même chose, c’est juste l’instant de référence qui change. dans le cas du chrono c’est un instant passé, dans le cas du compte a rebours un instant futur. dans les deux cas, pour avoir la valeur courante tu fais “instant présent” - “instant de référence”.

Effectivement, vu comme ça B).

(sinon la fonction “rebour” n’est appelée nulle part, c’est normal? ca expliquerait pourquoi window.open ne s’execute pas?)

Je viens de relire, et j’ai mieux compris : rebour doit être appellée par le boutton, et oui, c’est javascript pas java script B)
Donc oui c’est normal que ton window.open ne marche pas.

[quote=“fser, post:19, topic: 45750”]Je viens de relire, et j’ai mieux compris : rebour doit être appellée par le boutton
Donc oui c’est normal que ton window.open ne marche pas.[/quote]

Donc en l’état, à quoi il sert (ou en théorie?)? C’est que c’était un c/c ou tu l’a tapé pour rien B)
J’ai pas trop eu le temps de m’y mettre, mais j’ai quand même regardé un peu et j’avoue que je n’ai pas bien compris (les fonctions rebours, $, update et le " ‘plop’ "), le code de LodeRunner me parait plus compréhensible (c’est peut être parce que je ne connais pas les fonctions et tout et tout ?).

Pour le window.open, j’ai laissé ma première idée avec Open++.