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

How to create timer in javascript and count the clicks in specified time?

本文关键字：计算 定时间 javascript 创建 计时器      更新时间：2023-09-26

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

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做什么（而不仅仅是把它放在弹出窗口中）。

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

编辑

例如：

HTML

删除onclick属性，并将现有HTML中的id="clicks"更改为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;
        }
    });
}

请参阅设计用于您的代码的新工作示例。

相关文章：