Wie man Timer in Javascript erstellt und die Klicks in der angegebenen Zeit zählt?

Question

Ich möchte Timer in JavaScript erstellen, ich werde 10 Sekunden einrichten und Benutzer auf Bilder klicken und die Zählungen anzeigen, wenn die Zeit gestoppt wird.

Wie kann ich diese Aufgabe erreichen?

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

Sie eine Variable die Anzahl der Klicks festlegen können, und es jedes Mal erhöht, wenn der Timer läuft. Um zu überprüfen, ob der Timer läuft, können Sie eine andere boolesche Variable auf true setzen, während der Timer läuft, und false, wenn Sie fertig sind, damit Sie überprüfen können, ob der Timer läuft oder nicht.

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++; 
    } 
}); 

Sie können dies leicht ändern, so dass Sie auf alle Ihre Bilder klicken können, und Sie können ändern, was Sie tun wollen mit die resultierende count (anstatt nur in ein Popup).

Siehe working example auf JSfiddle.net.

---

EDIT

Für Ihr Beispiel:

HTML

die onclick Attribute entfernen und die id="clicks" zu class="clicks" in Ihrem vorhandenen HTML ändern.

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; 
     } 
    }); 
} 

new working example Siehe entworfen mit Ihre Code zu arbeiten.