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