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”，则结果不准确。您可以根据需要通过禁用按钮进行修复等）（感谢How Many Seconds Between Two Dates?）

Answer 2

真的没有必要为此使用Timeout。你想要做的就是测量两个时间日期之间的两个差异。

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

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

3 个答案: