Javascript'te zamanlayıcı nasıl oluşturulur ve tıklatılan zamanlar nasıl sayılır?

Question

JavaScript'de zamanlayıcı oluşturmak istiyorum, 10 saniye ayarlayacağım ve kullanıcının görüntüleri tıklayıp zaman durduğunda sayımları göstereceğine sahibim.

Bu görevi nasıl başarabilirim?

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

Sen tıklama sayısına için bir değişken ayarlayın ve zamanlayıcı çalışıyorsa bunu her zaman artırmak olabilir. Zamanlayıcının çalışıp çalışmadığını kontrol etmek için, zamanlayıcı çalışırken true olacak şekilde başka bir boole değişkeni ayarlayabilir ve zamanlayıcının çalışıp çalışmadığını kontrol etmek için false ayarlayabilirsiniz.

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

Eğer resimlerin herhangi tıklayabilir, böylece kolaylıkla bu değiştirebilir ve size ile ne yapmak istediğinizi değiştirebilir Sonuçta elde edilen count (yalnızca bir pop-up'a koymak yerine).

JSfiddle.net adresindeki working example konusuna bakın.

---

DÜZENLEME sizin Örneğin

:

onclick özelliklerini çıkarın ve mevcut HTML id="clicks"class="clicks" geçmek

HTML.

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

sizin kodu ile çalışmak üzere tasarlanmış new working example Bkz.