Compte à rebours js et PHP

Version imprimable

08/11/2017, 09h20
brice will

Compte à rebours js et PHP

bonjour. s'il vous plait j'aimerai réalisé dans mon app un système d'authentification reposant sur un compte à rebours et je sais pas comment m'y prendre.en fait je voudrais que chaque champ sois remplis dans l'intervalle d'une minute au cas contraire l'utilisateur est redirectionné vers une autre page.des que le champ a le focus,on affiche le chrono (donc 60sec qui se decrementent).en plus je voudrais qu'après 3 échec de connections,l'utilisateur est renvoyé à une autre page.
c'est peut être dingue mais svp je voudrai le faire merci donc pour vos réponses constructives.

je t'ai fais un truc rapide.

Code:

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
<input type="text" data-name="input1" /><span id="input1"></span><br />
	<input type="text" data-name="input2" /><span id="input2"></span>
	<script type="text/javascript">
        let inputs = document.querySelectorAll('input');
        let kill=false;
        let loopChrono;
        let secs = 60;
        for(let i=0; i<inputs.length; i++) {
            inputs[i].addEventListener('focus', function() {
            kill=false;
            secs = 60;
            loopChrono = setInterval(function() {
                startChrono(inputs[i].getAttribute('data-name'));
            },1000);
        });
        inputs[i].addEventListener('blur', function() {
            stopChrono(inputs[i].getAttribute('data-name'));
        });
        }
 
        function startChrono(name) {
            secs--;
                    document.getElementById(name).innerText = secs;
                        if(secs<=0) {
                                killPage();
                        }
                        if(kill) {
                                document.getElementById(name).innerText = "";
                        }
                }
                function stopChrono(name) {
            document.getElementById(name).innerText = "";
                        clearInterval(loopChrono);
                }
                function killPage() {
            document.location.href="https://www.google.com/";
                }
        </script>

a toi de gerer tes 3 connections et utiliser killPage();

08/11/2017, 10h21
brice will

merci à toi.c'est assez explicite mais svp t'as oublier de commenter j'ai oublié de signaler que je suis débutant en JS

Code:

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
<input type="text" data-name="input1" /><span id="input1"></span><br />
	<input type="text" data-name="input2" /><span id="input2"></span>
	<script type="text/javascript">
                let inputs = document.querySelectorAll('input');//selection de tous les <input>
        let loopChrono;//nom du bouclage (pour garder la main dessus)
        let secs = 60;//nombre de secondes
                for(let i=0; i<inputs.length; i++) {//bouclage sur les <inputs>
                    inputs[i].addEventListener('focus', function() {//ajout d'un listener (quand l'utilisateur clique dans un <input> -il a le focus-)
                secs = 60;//reinitialisation du nombre de secondes
                loopChrono = setInterval(function() {//bouclage toutes les secondes sur startChrono() avec l'attribut "data-name" de l'input
                    startChrono(inputs[i].getAttribute('data-name'));
                },1000);//toutes les secondes 1000 = 1 sec
                        });
            inputs[i].addEventListener('blur', function() {//quand on "sort" de l'input, on stop le chrono
                stopChrono(inputs[i].getAttribute('data-name'));
            });
                }
 
                function startChrono(name) {
                    secs--;//decrementation du nombre de seconde
                    document.getElementById(name).innerText = secs;//on affiche le temps restant dans le <span> correspondant
                        if(secs<=0) {
                                killPage();//si le temps est ecoule, on arrete tout
                        }
                }
                function stopChrono(name) {
            document.getElementById(name).innerText = "";//on n'affiche plus le temps restant dans le <span> correspondant
                        clearInterval(loopChrono);//on arrete le bouclage
                }
                function killPage() {//si on decide de tout arreter
            document.location.href="https://www.google.com/";//on redirige sur une page (google en exemple)
                }
        </script>

j'en ai profite pour surpprimer la variable "kill" qui ne servait a rien

08/11/2017, 10h44
brice will

grandement merci pour cette clarté et la peine que tu te donne c'est gentil!!