JavaScript 秒表

• 下载源代码 - 0.4 KB

目标

我知道网上有很多实现计时器功能的例子，但似乎没有一个将计时器与用户界面分离，所以我决定编写自己的对象，它可以包含在任何页面中，而不会与用户界面绑定。

目标

创建一个 JavaScript 计时器，其工作方式类似于 .NET 的 StopWatch 类。该对象不应依赖于任何 UI 元素，并且应该能够尽可能轻松地添加到任何网页。

代码

构造函数

我首先创建了 JavaScript 对象如下

function StopWatch(){
}//yes this is how to define a class in JavaScript 

变量

下一步是确定完成任务所需的变量。我们知道我们需要开始和停止的时间戳，以及一个状态变量来确定我们是否正在运行。

function StopWatch(){

  var startTime = null; 
  var stopTime = null; 
  var running = false; 
  .... 
}

方法

现在，方法；我们知道我们需要启动、停止和设置持续时间的方法。我知道一些计时器实现包含重置方法，但在这种实现中，我们推断调用启动也应该重置计时器。

TimeStamp 方法

我需要在对象中创建一个私有方法，以返回给定时间点的的时间戳。Date 对象中的 getTime 函数返回自 1970 年 1 月 1 日以来的毫秒数。

function getTime(){
  var day = new Date();
  return day.getTime();
}

启动方法

调用启动应该验证我们是否已经正在运行，并应设置 startTime 变量。

this.start = function(){ 

if (running == true)
    return;
else if (startTime != null) 
    stopTime = null; 

running = true;    
startTime = getTime();

}

停止方法

调用停止应该验证我们是否正在运行，并应设置 stopTime 变量。

this.stop = function(){ 

if (running == false)
    return;    

stopTime = getTime();
running = false; 

}

持续时间方法

此方法应确定我们同时具有开始和停止时间戳，并以秒为单位返回两者之间的持续时间。

this.duration = function(){ 

if(startTime == null || stopTime == null)
   return 'Undefined';
else  
   return (stopTime - startTime) / 1000;

}

使用计时器对象

要使用该对象，需要将 StopWatch.js 文件或其逻辑包含到您自己的 .js 文件中，并创建一个 StopWatch 实例，如下所示

var _StopWatch = new StopWatch();

要启动计时器，只需调用 Start。

_StopWatch.start();

要停止计时器，只需调用 Stop。

_StopWatch.stop();

要获取持续时间，只需调用 Duration。

alert(_StopWatch.duration());
//example return: 3.567(seconds)