Question

我正在尝试制作一个倒计时时钟，当用户点击按钮时，它会启动计时器。但是，现在，只要页面加载，倒计时就会开始。我怎么能等到用户真正按下id='startCountdown'按钮才能启动countdown。我是JavaScript新手，非常感谢您的反馈。

.js代码：

// Wait for webpage to load
$(document).ready(function(){
  var sessionTime = 1;
  var breakTime = 5;

  // Update session and break times with pre-defined variables
  $('#session-time').text(sessionTime);
  $('#rest-time').text(breakTime);

  // jQuery click functions for increasing and decreasing time
  $('#decrease-session').on('click', downSession);
  $('#increase-session').on('click', upSession);
  $('#decrease-rest').on('click', downBreak);
  $('#increase-rest').on('click', upBreak);


  // Decrease the length of each session
  function downSession() {
    sessionTime--;
    $('#session-time').text(sessionTime);
    $('#countdown-time').text(sessionTime);
  }

  // Increase the length of each session
  function upSession() {
    sessionTime++;
    $('#session-time').text(sessionTime);
    $('#countdown-time').text(sessionTime);
  }

  // Decrease the length of each break
  function downBreak() {
    breakTime--;
    $('#rest-time').text(breakTime);
  }

  // Increase the length of each break
  function upBreak() {
    breakTime++;
    $('#rest-time').text(breakTime);
  }

  // Convert session and break times to seconds
  var sessionConverted = sessionTime * 60;
  var breakConverted   = breakTime   * 60;

  // When clicked, send to start countdown
  $('#startCountdown').on('click', countdown(sessionConverted));

  // Convert time and return in H:M:S
  function convertTime(time) {
    time = parseInt(time, 10);
    var hours   = Math.floor(time / 3600);
    var minutes = Math.floor((time % 3600) / 60);
    var seconds = Math.floor((time % 3600) % 60);
    return {
      'H': hours,
      'M': minutes,
      'S': seconds
    };
  }

  // Interval function that will decrement the time
  function countdown(count) {
    var timerId = setInterval(function() {
      // Decrement the count
      count--;

      // Send count to convertTime to display
      var t = convertTime(count);
      var hours = 0;
      var mins  = 0;
      var secs  = 0;

      // If statements to check if time is less than 10
      // If so, add leading "0"
      (t['H'] < 10) ? (hours = "0" + t['H']) : (hours = t['H']);
      (t['M'] < 10) ? (mins  = "0" + t['M']) : (mins  = t['M']);
      (t['S'] < 10) ? (secs  = "0" + t['S']) : (secs  = t['S']);

      if (hours >= 1) {
        $('#countdown-time').text(hours + ":" + mins + ":" + secs);
      } else {
        $('#countdown-time').text(mins + ":" + secs);
      }

      // Stop counting if the count has reached "0"
      if(count < 1) {
        clearInterval(timerId);
      }
    }, 1000);
  }
});

用于测试的Codepen：

http://codepen.io/Mukul215/pen/obxLev

Answer 1

您正在立即调用countdown函数，而不是将其作为处理程序提供给.on。

$('#startCountdown').on('click', countdown(sessionConverted));

因为在表达式中使用括号，所以会立即调用countdown(sessionConverted)并将返回值作为.on方法的处理程序提供。并且由于返回值不是函数，因此click事件实际上不会执行任何操作。

试试这个：

$('#startCountdown').on('click', function (e) {
    countdown(sessionConverted);
});

Answer 2

这可能是因为您已在$(document).ready(function(){})

中编写了所有代码

尝试删除$(document).ready(function(){})功能之外的点击事件。试试下面给出的代码：

        var sessionTime;
        var breakTime;
        // Wait for webpage to load
        $(document).ready(function () {
             sessionTime = 1;
             breakTime = 5;

            // Update session and break times with pre-defined variables
            $('#session-time').text(sessionTime);
            $('#rest-time').text(breakTime);

            // jQuery click functions for increasing and decreasing time
            $('#decrease-session').on('click', downSession);
            $('#increase-session').on('click', upSession);
            $('#decrease-rest').on('click', downBreak);
            $('#increase-rest').on('click', upBreak);
            // When clicked, send to start countdown
            $('#startCountdown').on('click', countdown(sessionConverted));
        });

        // Decrease the length of each session
        function downSession() {
            sessionTime--;
            $('#session-time').text(sessionTime);
            $('#countdown-time').text(sessionTime);
        }

        // Increase the length of each session
        function upSession() {
            sessionTime++;
            $('#session-time').text(sessionTime);
            $('#countdown-time').text(sessionTime);
        }

        // Decrease the length of each break
        function downBreak() {
            breakTime--;
            $('#rest-time').text(breakTime);
        }

        // Increase the length of each break
        function upBreak() {
            breakTime++;
            $('#rest-time').text(breakTime);
        }

        // Convert session and break times to seconds
        var sessionConverted = sessionTime * 60;
        var breakConverted = breakTime * 60;



        // Convert time and return in H:M:S
        function convertTime(time) {
            time = parseInt(time, 10);
            var hours = Math.floor(time / 3600);
            var minutes = Math.floor((time % 3600) / 60);
            var seconds = Math.floor((time % 3600) % 60);
            return {
                'H': hours,
                'M': minutes,
                'S': seconds
            };
        }

        // Interval function that will decrement the time
        function countdown(count) {
            var timerId = setInterval(function () {
                // Decrement the count
                count--;

                // Send count to convertTime to display
                var t = convertTime(count);
                var hours = 0;
                var mins = 0;
                var secs = 0;

                // If statements to check if time is less than 10
                // If so, add leading "0"
                (t['H'] < 10) ? (hours = "0" + t['H']) : (hours = t['H']);
                (t['M'] < 10) ? (mins = "0" + t['M']) : (mins = t['M']);
                (t['S'] < 10) ? (secs = "0" + t['S']) : (secs = t['S']);

                if (hours >= 1) {
                    $('#countdown-time').text(hours + ":" + mins + ":" + secs);
                } else {
                    $('#countdown-time').text(mins + ":" + secs);
                }

                // Stop counting if the count has reached "0"
                if (count < 1) {
                    clearInterval(timerId);
                }
            }, 1000);
        }

等待用户单击而不是页面加载以启动功能

2 个答案: