HTML 从 15 分钟开始并一直持续到按下按钮的计数器？

Question

我正在尝试制作一个带有 2 个按钮和 1 个下拉菜单的 HTML 小页面（最终我会将其乘以 5）。

第一个按钮激活一个小计时器，该计时器从 15 分钟开始计时，直到再次按下该按钮为止。

第二个按钮做完全相同的事情，但从 30 分钟开始，然后下降到底片，直到再次按下按钮。

下拉列表只有所有员工的列表。

我发现了许多不同的计时器，但其中 none 进入了底片。如果我删除检查否定的 if 语句，它就不起作用。谁能帮我解决这个负面问题？

$(document).ready(function () {
    var secs = 0;
    var id = setInterval(function () {
        secs++; console.log(secs);
        if (secs > 5) {
            clearInterval(id);
            alert('Total Time: ' + secs + ' seconds');
        }
    }, 1000);
});

######Javascript:

window.onload = function () {
    var secs = 0;
    var id = setInterval(function () {
        secs++; console.log(secs);
        if (secs > 5) {
            clearInterval(id);
            alert('Total Time: ' + secs + ' seconds');
        }
    }, 1000);
};

Answer 1

我会这样做：

var myTimer;
var started = false
var count = 15 * 60; //15 mins x 60 secs

$("button").click(function() {
  if (!started) {
    started = true;
    $(this).text("Stop");
    myTimer = setInterval(function() {
      $(".timer").text(--count);
    }, 1000);
  } else {
    started = false;
    clearInterval(myTimer);
    $(this).text("Start");
  }
});

Here is the JSFiddle demo

请注意，我只实现了 15 分钟计时器。您可以复制 30 分钟的代码。

Answer 2

你可以试试这个

(function (javascript) {
    // An Array with the doms and their cancellation functions
    var buttonList = [];

    /**
     * Toggles each button's timer
     * @param {HTMLElement} dom 
     * @param {number} timer 
     * @returns {void}
     */
    function toggleButton(dom, timer) {
        // find the object for the dom in the list
        var result = buttonList.find(function (item) {
            return item.dom === dom;
        });
        // if it is found 
        if (result) {
            // stop the timer
            result.cancel();
            // reset the text to default
            print(timerFormat(timer));
            // remove the object from the list
            var index = buttonList.indexOf(result);
            buttonList.splice(index, 1);
        } else {
            // if it isn't found then start the timer and add the object to the list
            buttonList.push({
                cancel: startTimer(timer, print),
                dom: dom
            });
        }
        /**
         * Changes the text of the element
         * @param {string} text 
         * @returns {void}
         */
        function print(text) {
            dom.innerText = text;
        }
    }

    /**
     * Creates a timer and returns a cancelation function
     * @param {number} timer 
     * @param {function(string): void} print
     * @returns {function(): void}
     */
    function startTimer(timer, print) {
        var intervalId = setInterval(onTick, 1000);
        return cancel;
        function onTick() {
            var result = timerFormat(timer--);
            if (typeof print === "function") print(result);
            else console.log(result);
        }
        function cancel() {
            if (intervalId) {
                clearInterval(intervalId);
                intervalId = undefined;
            }
        }
    }

    /**
     * Converts the seconds into [mm:ss] format
     * @param {number} timer
     * @returns {string}
     */
    function timerFormat(timer) {
        var negative = false;
        if (timer < 0) {
            timer = timer * -1;
            negative = true;
        }
        var minutes = Math.floor(timer / 60);
        var seconds = String(timer % 60);
        var symbol = negative ? "- " : "";
        return symbol + minutes + ":" + "0".repeat(2 - seconds.length) + seconds;
    }

    javascript.toggleButton = toggleButton;
})(window);

<button onclick="toggleButton(this, 900)">15:00</button>
<button onclick="toggleButton(this, 1800)">30:00</button>

HTML 从 15 分钟开始并一直持续到按下按钮的计数器？

HTML Counter that starts at 15 minutes and goes until button press?

html

javascript

jquery

countdowntimer