javascript - 如何在javascript中创建计时器并计算指定时间内的点击次数？

Question

我想在 JavaScript 中创建计时器，我将设置 10 秒并让用户点击图像并在时间停止时显示计数。

我怎样才能完成这个任务？

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>

索引.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

您可以为点击次数设置一个变量，如果计时器正在运行，每次都会增加它。要检查计时器是否正在运行，您可以在计时器运行时将另一个 bool 变量设置为 true 并在完成时设置为 false ，这样您就可以检查是否不是计时器在运行。

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

您可以轻松地修改它，以便您可以单击任何图像，并且可以更改您想要对生成的 count 执行的操作(而不是仅仅将其放在弹出窗口中)。

参见 working example在 JSfiddle.net 上。

---

编辑

以你的例子为例:

HTML

删除 onclick 属性并将 id="clicks" 更改为现有 HTML 中的 class="clicks"。

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旨在与您的代码一起使用。