如何使用按鈕激活我的倒數計時器？

Question

我有一個用JavaScript編寫的倒數計時器功能。它可以正常工作，但在我啟動頁面時啟動。我希望它應該在單擊按鈕時啟動。

  function startTimer(duration, display) {
        var timer = duration, minutes, seconds;
        setInterval(function () {

            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            display.text(minutes + ":" + seconds);

            if (--timer < 0) {
              //  timer = 0;

                time.style.display = "none";
                time2.style.display2 = "none";
                redxsms.style.display = "none";
                onaysms.style.display = "none";
                tekraruyarionay.style.display = "block";
                tekraruyarired.style.display = "block";

                // time.style.display="block";
                setTimeout(function () { location.reload() }, 5000);
            }
        }, 1000);
    }



   jQuery(function ($) {
        var fiveMinutes = 60 * 3,
            display = $('#time');
        display2 = $('#time2');
        startTimer(fiveMinutes, display);
        startTimer(fiveMinutes, display2);

    });

這是倒數計時功能。

  <button class="ui toggle button" onclick="      hideshow(document.getElementById('onaysms')); show(this);" id="onaytoggle">

這是我單擊時應激活的按鈕。

<span id="time"></span>

它在頁面啟動時啟動，單擊按鈕后如何啟動？

Answer 1

像這樣在“ onclick”事件中插入您的計時器調用，當您單擊按鈕時將觸發它。

如果您的頁面上有幾個按鈕，我建議您通過在html中添加一個id來給它一個id： id='timerToggle' ，然后在下面的代碼中將$("button.toggle")替換為$("#timerToggle")

 jQuery(function ($) {
           $("button.toggle").click(function(){
               var fiveMinutes = 60 * 3,
                   display = $('#time');
               display2 = $('#time2');
               startTimer(fiveMinutes, display);
               startTimer(fiveMinutes, display2);
           });
        });