Javascript avec un toggle
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:
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:
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.