Javascript实现的StopWatch功能示例

下面我将详细讲解如何实现“Javascript实现的StopWatch功能示例”。

确定需求

首先，我们需要确定需求。

这个StopWatch功能的核心就是计时器功能，需要实现计时功能和计时器控制功能，可以是通过控制开始/暂停/停止操作实现。

HTML结构

接下来，我们需要确定HTML结构。

StopWatch功能界面的HTML结构比较简单，只需要一个显示时间的区域和三个按钮：开始、暂停和停止。

HTML代码如下所示：

 <div id="stopwatch">
    <span id="display">00:00:00</span>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <button id="pause">暂停</button>
</div>

JS代码

然后，我们需要编写JS代码来实现计时器功能及控制功能。

先定义好变量：

var startTime = 0;
var start = 0;
var end = 0;
var diff = 0;

var timerID = 0;

然后实现计时器功能：

function timer() {
    end = new Date();
    diff = end - start;
    diff = new Date(diff);

    var msec = diff.getMilliseconds();
    var sec = diff.getSeconds();
    var min = diff.getMinutes();
    var hr = diff.getHours() - 8;

    if (hr < 10) {
        hr = "0" + hr;
    }
    if (min < 10) {
        min = "0" + min;
    }
    if (sec < 10) {
        sec = "0" + sec;
    }
    if (msec < 10) {
        msec = "00" + msec;
    }
    else if (msec < 100) {
        msec = "0" + msec;
    }

    document.getElementById("display").innerHTML = hr + ":" + min + ":" + sec + ":" + msec;
    timerID = setTimeout("timer()", 10);
}

接着，实现控制功能：

function startWatch() {
    document.getElementById("display").innerHTML = "00:00:00:000";
    startTime = new Date();
    timer();
}

function stopWatch() {
    clearTimeout(timerID);
}

function pauseWatch() {
    clearTimeout(timerID);
    end = new Date();
    diff = end - start;
}

最后，我们需要添加按钮监听事件来触发计时器的开始、暂停和停止控制功能：

window.onload = function() {
    document.getElementById("start").addEventListener("click", startWatch);
    document.getElementById("stop").addEventListener("click", stopWatch);
    document.getElementById("pause").addEventListener("click", pauseWatch);
}

完成以上JS代码后，我们就实现了一个StopWatch功能的计时器。通过HTML呈现出来的界面，在JavaScript的实现下，实现了简单的计时器功能。　　

示例说明

• 示例1：以上代码在window.onload时会触发监听方法，开始按钮对应启动startWatch()方法，触发timer()方法进行计时并显示；暂停按钮对应触发pauseWatch方法，暂停计时。由于pauseWatch()方法并没有清空已经触发的timer()方法，因此暂停后重新启用，会继续在暂停时的时间基础上再次计时；停止按钮对应触发stopWatch()方法，清空计时器，停止计时。

• 示例2：以上的calculateTimeElapsed()方法可以实现任意两个时间点之间的时间间隔计算，可以应用于任意需求，如考生答题的计时器，监测程序的计时器等等。但需要注意的是，js中的时间间隔是按照毫秒计算的，而和系统时间有关，因此不建议使用过长时间间隔或者精确度要求很高的场合，如科学实验等。