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

aftab 发表于 Dev

阿法塔布

我想在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>

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

乔纳森·林

您可以将变量设置为点击次数，并在每次计时器运行时递增该变量。要检查计时器是否正在运行，可以将另一个布尔变量设置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>

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（而不只是将其放入弹出窗口中）。

请参阅JSfiddle.net上的工作示例。

编辑

例如：

的HTML

删除onclick属性和修改id="clicks"，以class="clicks"在现有的HTML。

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