Javascript avec un toggle

**Guiddg** · 30/12/2016, 09h07

Bonjour,

J'ai un probl�me avec un toggle switch + l'activation d'un script javascript

Ce que je voudrais avoir ces de pouvoir afficher le temps qui d�file apr�s avoir cliqu� sur mon toggle switch et apres avoir appuyer une deuxi�me fois sur le toggle je voudrais qui initialise le temps � 0 et qui me garde le temps qui viens de d�fil� et qui me le mette dans un input de type texte, autre part sur mon site et de plus qui me vide les deux input texte (Nom+Prenom et Plaque).
Je vous met le code du js :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
var temps = 0;
var compteur;
function lancerCompteur(tempsInitial)
{
    temps = tempsInitial
    actualiserCompteur();
    compteur = setInterval('actualiserCompteur()', 1000);
}
function actualiserCompteur()
{
    if (temps <= 0)
    {
        clearInterval(compteur);
    }
    var heures = 0;
    var minutes = 0;
    var secondes = 0;
    heures = parseInt((temps % 86400) / 3600);
    minutes = parseInt((temps % 3600) / 60);
    secondes = temps % 60;
    var div = document.getElementById('temps');
    var texte = document.createTextNode(heures + ' heure(s) ' + minutes + ' minute(s) ' + secondes + ' secondes(s)');
    if (div.firstChild != null)
    {
        div.removeChild(div.firstChild);
    }
    div.appendChild(texte);
    temps++;
}

Le site :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
 
.switch input {display:none;}
 
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
 
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
 
input:checked + .slider {
  background-color: #2196F3;
}
 
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
 
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
 
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
 
.slider.round:before {
  border-radius: 50%;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
    var temps = 0;
    var compteur;
    function lancerCompteur(tempsInitial)
        {                                                               
            temps = tempsInitial
            actualiserCompteur();
            compteur = setInterval("actualiserCompteur()",1000);
        }
    function actualiserCompteur()
        {
            if (temps <= 0)
        {
            clearInterval(compteur);
        }
        var heures = 0;
        var minutes = 0;
        var secondes = 0; 
        heures = parseInt((temps % 86400) / 3600);
        minutes = parseInt((temps % 3600) / 60);
        secondes = temps % 60;
        var div = document.getElementById("temps");
        var texte = document.createTextNode(heures + " heure(s) " + minutes + " minute(s) " +  secondes + " secondes(s)");                               
        if (div.firstChild != null)
        {
                        div.removeChild(div.firstChild);
        }
            div.appendChild(texte);
            temps ++;
        }  
</script>
</head>
<body>
<input type="text" placeholder="Nom+Prenom" />
<input type="text" placeholder="Plaque" />
<select>
  <option value="Gemme">Gemme</option>
  <option value="Minerai">Minerai</option>
</select>
<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>
</body>
</html>

J'ai cherch� toute une soir�e mais j'ai pas trouver quelques choses qui fonctionne au niveau du code,Je sais qui faut utilis� une variable pour stocker le temps qui a d�fil� du js pour le remettre dans un input et qui faudra utilis� un document.getelementbyid mais comment l��crire et ou le mettre je ne sais pas (je d�but dans le js)

Je compte s�par� mon js et mon css en g�n�ral sa ne pose pas de probl�me au niveau du code mais je pr�f�re quand m�me le dire on sait jamais

Voil� merci pour vos futur r�ponse et � bient�t, h�sit� pas � me demander des informations compl�mentaire si vous avez mal compris ce que je veux.

**NoSmoking** · 31/12/2016, 09h13

Bonjour,
on ne vois nulle part dans ton code o� tu appelles la fonction lancerCompteur.

Au passage compteur = setInterval('actualiserCompteur()', 1000) gagne � s'�crire compteur = setInterval(actualiserCompteur', 1000).

Dans ces lignes

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
heures = parseInt((temps % 86400) / 3600);
minutes = parseInt((temps % 3600) / 60);
secondes = temps % 60;

� quoi te sert le parseInt ?

Il n'existe pas d'�l�ment dans ton code pour que var div = document.getElementById('temps') fonctionne.

Donc � suivre ...

Javascript avec un toggle

JavaScript

Discussions similaires

Partager

Partager