javascript - 记录用户之间的时间 - 一个简单的计时器

Question

我正在尝试创建一个简单的计时器。

用户按下“开始”按钮。当用户按下另一个按钮时，我想记录两者之间的时间。

这可以通过 setTimeout 实现吗？

Answer 1

setTimeout不应该用于您的情况。以下是显示单击“startBtn”和单击“endBtn”之间的秒数的方法：

var date1 = new Date();
document.getElementById("startBtn").onclick = function(){
   date1 = new Date();
}
document.getElementById("endBtn").onclick = function(){       
    var date2 = new Date();
    var dif = date1.getTime() - date2.getTime();
    var Seconds_from_T1_to_T2 = dif / 1000;
    var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);
    alert(Seconds_Between_Dates);
}

您可以从这里构建以获得所需的功能（例如，如果用户在单击“startBtn”之前单击“endBtn”，则结果当然是不准确的。您可以根据需要通过禁用按钮等来修复）（感谢两个日期之间有多少秒？）

Answer 2

确实没有必要为此使用超时。您要做的就是测量两个时间日期之间的两个差异。

HTML：

<span class="startTimer">
    Start Timer
</span>

<span class="stopTimer">
    Stop Timer
</span>

<span class="result">
</span>

JS，不，这里不需要使用 JQuery，但我喜欢它处理事件的方式：

(function($){
    var Timer = {
        startTimeInMs: null,
        endTimeInMs: null,
        start: function(){
            this.startTimeInMs = new Date();
        },
        stop: function(){
            this.endTimeInMs = new Date();
        },
        getTime: function(){
            return this.endTimeInMs - this.startTimeInMs;
        },
        bind: function() {
            var self = this;

            $('.startTimer').on('click', function(){
                self.start();
            });

            $('.stopTimer').on('click', function(){
                self.stop();
                self.printResult();
            });
        },
        printResult: function() {
            $(".result").html(this.getTime())
        },
        init: function(){
            this.bind();
        }
    }

    var timer = Object.create(Timer);
    timer.init();
})(jQuery);

Answer 3

您可以使用该Date.now()方法，无需每次都实例化一个新的 Date 对象。

这是一个以测量单圈时间为例的 jsFiddle：http: //jsfiddle.net/ZpFnp/

HTML

<button id="start">start/reset</button>
<button id="stop">lap</button>
<div id="output"></div>

JavaScript

var startTime = Date.now();

document.getElementById("start").addEventListener("click", function () {
    document.getElementById("output").innerHTML = "";
    startTime = Date.now();
});

document.getElementById("stop").addEventListener("click", function () {
    var elapsedTime = Date.now() - startTime;
    document.getElementById("output").innerHTML += "<p>" + elapsedTime  + "</p>";
});