Làm thế nào để tạo bộ đếm thời gian trong javascript và đếm số nhấp chuột trong thời gian được chỉ định?

Question

Tôi muốn tạo bộ đếm thời gian bằng JavaScript, tôi sẽ thiết lập 10 giây và yêu cầu người dùng nhấp vào hình ảnh và hiển thị số lượng khi thời gian dừng lại.

Làm cách nào để tôi có thể thực hiện tác vụ này?

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

Bạn có thể thiết lập một biến số lần nhấp chuột, và tăng nó mỗi khi nếu hẹn giờ đang chạy. Để kiểm tra xem bộ hẹn giờ có đang chạy hay không, bạn có thể đặt một biến boolean khác là true trong khi bộ hẹn giờ đang chạy và false khi nó được thực hiện, để bạn có thể kiểm tra xem bộ hẹn giờ có đang chạy hay không.

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

Bạn có thể dễ dàng sửa đổi này để bạn có thể nhấp vào bất kỳ hình ảnh của bạn, và bạn có thể thay đổi những gì bạn muốn làm gì với kết quả count (thay vì chỉ đặt nó trong cửa sổ bật lên).

Xem working example trên JSfiddle.net.

---

EDIT

Ví dụ của bạn:

HTML

Tháo onclick thuộc tính và thay đổi id="clicks" để class="clicks" trong HTML hiện tại của bạn.

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

Xem new working example được thiết kế để làm việc với đang của bạn.