Come creare il timer in javascript e contare i clic nel tempo specificato?

Question

Voglio creare il timer in JavaScript, imposterò 10 secondi e chiederò all'utente di fare clic sulle immagini e di visualizzare i conteggi quando il tempo si fermerà.

Come posso ottenere questo compito?

index.html

<div class="container"> 
    <div class="row"> 
     <div class="col-md-2"> 
      <img src="https://images.omkt.co/Files/402/15EAC0/19F78/8c2112737cfe4cd88779712a4906ef6d/0/hero_forte_2014--kia-1920x.png" height="150px" width="150px" id="clicks" onClick="clickMe()"> 
     </div> 
     <div class="col-md-2"> 
      <img src="https://images.omkt.co/Files/402/15EAC0/19F78/8c2112737cfe4cd88779712a4906ef6d/0/hero_forte_2014--kia-1920x.png" height="150px" width="150px" id="clicks" onClick="clickMe()"> 
     </div> 
     <div class="col-md-2"> 
      <img src="https://images.omkt.co/Files/402/15EAC0/19F78/8c2112737cfe4cd88779712a4906ef6d/0/hero_forte_2014--kia-1920x.png" height="150px" width="150px" id="clicks" onClick="clickMe()"> 
     </div> 
    </div> 

<div> 
    <p id="clicks">0</p> 
</div> 

index.js

var clicks = 0; 
function clickMe() { 
    clicks += 1; 
    document.getElementById("clicks").innerHTML = clicks; 
}; 

var digit=-1; 
    var min=0; 
    var time; 
    var timer_is_on=0; 

    function timer(){ 
      digit++; 

      if(digit>59){ 
       min++; 
       document.getElementById("mins").innerHTML=min; 
       digit=0; 
      } 
      // Put a "0" at the start of seconds 
      if (digit <= 9) 
       digit = '0' + digit; 
       document.getElementById("secs").innerHTML=digit; 
    } 

Answer 1

È possibile impostare una variabile per il numero di clic, e incrementarlo ogni volta se il timer è in funzione. Per verificare se il timer è in esecuzione, è possibile impostare un'altra variabile booleana su true mentre il timer è in esecuzione e false al termine, in modo da poter controllare se il timer è in esecuzione o meno.

HTML

<img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" id="img" /> 

<button id="button">Start Timer</button> 

JS

var img = document.getElementById("img"); 
var button = document.getElementById("button"); 

var timer = false; 
var count = 0; 
var t; 

button.addEventListener("click", function() { 
    timer = true; 
    count = 0; 
    t = setTimeout(function() { 
     alert("Clicks on img: " + count); 
    }, 10000); 
}); 

img.addEventListener("click", function() { 
    if(timer) { 
     count++; 
    } 
}); 

Si può facilmente modificare questo in modo che è possibile fare clic su una qualsiasi delle immagini, e si può cambiare ciò che si vuole fare con il risultante count (invece di metterlo in un popup).

Vedere working example su JSfiddle.net.

---

EDIT

Per esempio:

HTML

Rimuovere gli attributi onclick e modificare il id="clicks" per class="clicks" nel codice HTML esistente.

JS

var img = document.getElementsByClassName("clicks"); 
var button = document.getElementById("button"); 

var timer = false; 
var count = 0; 
var clicked = []; 
var t; 

button.addEventListener("click", function() { 
    timer = true; 
    count = 0; 
    clicked = []; 
    t = setTimeout(function() { 
     document.getElementById("clicks").innerHTML = count; 
     timer = false; 
    }, 10000); 
}); 

for(var i = 0; i < img.length; i++) { 
    img[i].id = i; 
    img[i].addEventListener("click", function() { 
     var index = this.id; 
     if(timer && (clicked[index] == undefined)) { 
      count++; 
      clicked[index] = true; 
     } 
    }); 
} 

Vedi new working example progettato per funzionare con il vostro codice .