CountDown脚本,无法正确显示或倒计时

时间:2015-12-25 01:13:17

标签: javascript html5 function for-loop countdown

所以我一直在为我的番茄钟(番茄)时钟调试我的脚本。我希望这个脚本做的是它将收到输入(在几分钟内)。现在我的脚本正在做的是倒数5而不是1秒。它也不会像我想要的那样显示分钟。

我以合理的方式编写脚本以登录到控制台并对其进行测试。我在控制台中看到的是它每秒显示一次,但如果有意义则每秒显示5秒。这是jsbin:https://jsbin.com/gigohajawo/3/edit?js,consolehttps://jsbin.com/gigohajawo/3/edit?js,console

这是代码,任何帮助将不胜感激!!!

//makes sure the page is loaded first
$(document).ready(function() {
    //global variables
    //grabs text of an id and converts it to an int
    var countMin = 5;
    var count1 = 60;


    //when button id "but" is clicked...

       //while page is up, it keeps track each second that has passed
       for(; countMin >=0;countMin--){
            var counter1 = setInterval(function(){
                //calls timer function to count down
                 count1 = Timer(count1,counter1,countMin);
            },1000);
          count1 =60;
        }



    //counts down
    function Timer(count,counter,minutes){
        count--;
        //once it hits 0 seconds, the interval will stop counting
        if(count <=0){
            clearInterval(counter); 
            return count;
        }

        //displays the countdown
        if(minutes < 10){
            if(count < 10){
                console.log("0:0" + count);
            } else {
                console.log("0:" + count);
            }
        }else if(minutes > 0 && minutes < 10){
            if(count < 10){
                console.log("0" + minutes +":0" + count);
            } else {
               console.log("0"+minutes+":" + count);
            }
        } else{
            if(count < 10){
                console.log(minutes+":0" + count);
            } else {
               console.log=minutes+":" + count;
            }
        }

        return count;
    }

});

1 个答案:

答案 0 :(得分:1)

This JSBin似乎按照你的意图行事。

代码:

//makes sure the page is loaded first
$(document).ready(function() {
    //global variables
    //grabs text of an id and converts it to an int
    var count1 = 120;

    // Call a function every 1000 milliseconds (1 second)
    var counter1 = setInterval(function() {
      count1 = Timer(count1, counter1);
    }, 1000);


    //counts down
    function Timer(count,counter){
        // Decrement the seconds counter
        count--;

        // Get the minutes and seconds in whole numbers
        var minutes = Math.floor(count / 60);
        var seconds = count % 60;

        // Once it hits 0 seconds, the interval will stop counting
        if(count <=0){
            clearInterval(counter);     
        }

        // Pads the seconds with a 0
        if (seconds < 10) {
          seconds = "0" + seconds;
        }

        // Pads the minutes with a 0
        if (minutes < 10) {
          minutes = "0" + minutes;
        }

        //displays the countdown
        console.log(minutes + ":" + seconds)

        return count;
    }

});

请注意:

  1. 由于您已将count1定义为全局变量,因此无需将其传递给Timer
  2. counter1
  3. 也是如此

    如果我改写它,我会做这样的事情:

    //makes sure the page is loaded first
    $(document).ready(function() {
        var timeInSeconds = 120;
    
        var timeCounter = setInterval(function() {
          timeInSeconds--;
    
          // If we hit 0 seconds clear the timer
          if (timeInSeconds <= 0) {
            clearInterval(timeCounter);
          }
    
          // Display the current time
          displayTime();
        }, 1000);
    
    
        function displayTime(){
            // Get the minutes and seconds in whole numbers
            var minutes = Math.floor(timeInSeconds / 60);
            var seconds = timeInSeconds % 60;
    
            // Pad with zeros using the Ternary operator
            seconds = (seconds < 10) ? "0" + seconds : seconds;
            minutes = (minutes < 10) ? "0" + minutes : minutes;
    
            // Display the countdown
            console.log(minutes + ":" + seconds)
        }
    
    });