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> |
Partager