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

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

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

---

这可以通过setTimeout实现吗？

setTimeout

不应该用于您的情况。以下是显示单击“开始”和单击“结束”之间的秒数的方法：

您可以从此处进行构建以获得所需的功能（例如，如果用户在单击“开始”之前单击“结束”按钮，则结果当然不准确。您可以根据需要禁用按钮等进行修复。）

---

（多亏了）

setTimeout

不应用于您的情况。以下是显示单击“开始”和单击“结束”之间的秒数的方法：

您可以从此处进行构建以获得所需的功能（例如，如果用户在单击“开始”之前单击“结束”按钮，则结果当然不准确。您可以根据需要禁用按钮等进行修复。）

---

（多亏了）

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

HTML:

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

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

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

---

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

HTML:

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

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

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

---

您只需使用

Date.now（）

方法，无需每次实例化一个新的日期对象

以下是一个测量圈速的JSFIDLE示例：

HTML

启动/重置
大腿部

JavaScript

var startTime=Date.now（）；
document.getElementById（“开始”）.addEventListener（“单击”），函数（）{
document.getElementById（“输出”）.innerHTML=“”；
startTime=Date.now（）；
});
document.getElementById（“停止”）.addEventListener（“单击”），函数（）{
var elapsedTime=Date.now（）-startTime；
document.getElementById（“输出”）.innerHTML+=“”+elapsedTime+”
”；
});

您只需使用

Date.now（）方法，无需每次实例化一个新的日期对象

以下是一个测量圈速的JSFIDLE示例：

HTML

启动/重置
大腿部

JavaScript

var startTime=Date.now（）；
document.getElementById（“开始”）.addEventListener（“单击”），函数（）{
document.getElementById（“输出”）.innerHTML=“”；
startTime=Date.now（）；
});
document.getElementById（“停止”）.addEventListener（“单击”），函数（）{
var elapsedTime=Date.now（）-startTime；
document.getElementById（“输出”）.innerHTML+=“”+elapsedTime+”
”；
});
Date

对象就是你要找的：试试

Date

对象就是你要找的：试试看，是的，我知道你跑得更快。无论如何，这并没有阻止我发布我的方法；是啊，我知道你跑得更快。无论如何，这并没有阻止我发布我的方法；P

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

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

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