如何检查javascript手表是否在运行？

时间：2019-05-13 15:43:03

标签： javascript

我正在使用下面的JavaScript时钟来记录时间。我将在单击按钮时启动此时钟。现在，如果此时钟未运行，我需要提醒用户。如何检查时钟的运行状态？

    function markPresent() {
        window.markDate = new Date();
        updateClock();
    }

    function updateClock() {
        var currDate = new Date();
        var diff = currDate - markDate;
        document.getElementById("test").innerHTML = format(diff / 1000);
        setTimeout(function () { updateClock() }, 1000);
    }

    function format(seconds) {
        var numhours = parseInt(Math.floor(((seconds % 31536000) % 86400) / 3600), 10);
        var numminutes = parseInt(Math.floor((((seconds % 31536000) % 86400) % 3600) / 60), 10);
        var numseconds = parseInt((((seconds % 31536000) % 86400) % 3600) % 60, 10);
        return ((numhours < 10) ? "0" + numhours : numhours)
            + ":" + ((numminutes < 10) ? "0" + numminutes : numminutes)
            + ":" + ((numseconds < 10) ? "0" + numseconds : numseconds);
    }

<div id="divtimer" style="text-align:center">
  <p id="test"></p>
  <button type="button" class="btn btn-success" onclick=" markPresent()">Start</button>
</div>

2 个答案:

答案 0 :(得分：3)

好吧，我认为您的问题很简单，但是在查看您的代码时，我发现了其他我想提及的问题，因此您可以提高JavaScript技能。

首先要考虑全局。

  

使用JavaScript时请始终牢记这一点，因为先定义好以后在代码中使用的是一种好习惯。您的代码没有此代码，因此如果出于某种原因需要在其他地方实现它，则可能会遇到麻烦。

HTML

由于我们的HTML不会发生太大变化，因此请保持清晰，我们的HTML将是这样：

<div id="divtimer" style="text-align:center">
    <p id="test"></p>
    <button type="button" class="btn btn-success" id="clock">Start</button>
</div>

HTML的唯一更改是在按钮上添加了id="clock"属性。

JavaScript

例如，让我们定义我们将使用的每个DOM元素，首先定义时钟处理程序和控制变量：

var clockDiv = document.querySelector("#test"),
    button = document.querySelector("#clock"),
    clock = null, //Define a global variable for the clock
    isRunning = false, //You can view if clock is running from every scope 
    initTime = null;// Initial time of the clock

为什么要为时钟设置全局变量？

为确保应用程序功能和应用程序性能之间的平衡，我们需要为setInterval()函数定义一个变量，以便您可以随时停止它，而不是即使您停止了时钟也要保持该函数运行

处理按钮。

为了防止在DOM未准备好时执行代码，我们可以在已经为时钟按钮定义的全局变量上调用事件侦听器：

button.addEventListener("click",Clock);

是的，就这么简单。每次单击按钮都会调用Clock()函数。

处理Clock（）

这就是我在说的。由于我们已经定义了其余代码（全局变量）中需要使用的内容，因此我们现在可以仅检查Clock()函数中clock===null的值：

function Clock() {
    console.log("Called clock");
    if (clock != null) {
        //Clock is running
        console.log("Stopping clock");
        clearInterval(clock);
        clock = null;
        button.innerText = "Start";
        clockDiv.innerText = "";
        isRunning = false;
    } else {
        //Clock is not running
        console.log("Starting clock");
        setInitialTime();
        clock = setInterval(updateClock, 1000); // Starts calling updateClock, which should do what your need with the clock.
        button.innerText = "Stop"; //Changes the clock button text
        updateClock();
        isRunning = true;
    }
}

该按钮只有两个功能。停止并开始。因此，我们可以使用if语句来检查时钟是否已经启动，并执行相反的操作。 （如果停止，则启动它。否则，如果停止，则停止它。）

注意：

  

不要使用innerHTML。

这在JavaScript中是非常糟糕的做法，因为使用innerHTML会将字符串中的所有内容解析为HTML并将其放置在DOM上。在小型应用程序中，效果可能不会很大，但在生产中使用innerHTML可能会破坏应用程序功能和应用程序性能之间的平衡。

  

推荐使用：innerText。

更新时钟。

启动时钟时，我们调用了一个名为setInitialTime()的函数，它的唯一作用是在单击按钮之前将全局变量initTime定义为：

function setInitialTime() {
    initTime = new Date().getTime();
}

现在，要更新时钟，我们唯一需要做的就是比较给定的两个时间戳并计算两者之间的差：

function updateClock() {
    console.log("Clock update");
    let currTime = new Date().getTime(),
        diff = currTime - initTime;
    console.log(format(diff / 1000));
    clockDiv.innerText = format(diff / 1000);
}

您的format()函数保持不变：

function format(seconds) {
    var numhours = parseInt(Math.floor(((seconds % 31536000) % 86400) / 3600), 10);
    var numminutes = parseInt(Math.floor((((seconds % 31536000) % 86400) % 3600) / 60), 10);
    var numseconds = parseInt((((seconds % 31536000) % 86400) % 3600) % 60, 10);
    return ((numhours < 10) ? "0" + numhours : numhours) + ":" + ((numminutes < 10) ? "0" + numminutes : numminutes) + ":" + ((numseconds < 10) ? "0" + numseconds : numseconds);
}

因此，您可以找到具有我所做的必要更改和建议的代码。它的工作原理相同，但是效果不错。

  

注意： 现在，您可以在其中查看变量isRunning，以检查时钟是否在运行。

查看其工作原理：

var clockDiv = document.querySelector("#test"),
    button = document.querySelector("#clock"),
    clock = null, //Define a global variable for the clock
    isRunning = false,
    initTime = null;

button.addEventListener("click", Clock);

function Clock() {
    console.log("Called clock");
    if (clock != null) {
        //Clock is running
        console.log("Stopping clock");
        clearInterval(clock);
        clock = null;
        button.innerText = "Start";
        clockDiv.innerText = "";
        isRunning = false;
    } else {
        //Clock is not running
        console.log("Starting clock");
        setInitialTime();
        clock = setInterval(updateClock, 1000); // Starts calling updateClock, which should do what your need with the clock.
        button.innerText = "Stop"; //Changes the clock button text
        updateClock();
        isRunning = true;
    }
}

function setInitialTime() {
    initTime = new Date().getTime();
}

function updateClock() {
    console.log("Clock update");
    let currTime = new Date().getTime(),
        diff = currTime - initTime;
    console.log("Actual time is " + currTime);
    console.log("Time inited was " + initTime);
    console.log(format(diff / 1000));
    clockDiv.innerText = format(diff / 1000);
}

function format(seconds) {
    var numhours = parseInt(Math.floor(((seconds % 31536000) % 86400) / 3600), 10);
    var numminutes = parseInt(Math.floor((((seconds % 31536000) % 86400) % 3600) / 60), 10);
    var numseconds = parseInt((((seconds % 31536000) % 86400) % 3600) % 60, 10);
    return ((numhours < 10) ? "0" + numhours : numhours) + ":" + ((numminutes < 10) ? "0" + numminutes : numminutes) + ":" + ((numseconds < 10) ? "0" + numseconds : numseconds);
}
<div id="divtimer" style="text-align:center">
  <p id="test"></p>
  <button type="button" class="btn btn-success" id="clock">Start</button>
</div>

答案 1 :(得分：0)

setTimeout(function () { checkClock() }, 2000);


var lastDiff = null;
function checkClock() {
    let currDiff = document.getElementById("test").innerHTML;
    if (currDiff == lastDiff) {
        alert('Clock is not running!');
    } else {
    lastDiff = currDiff;
    setTimeout(function () { checkClock() }, 2000);
}
相关问题
最新问题