简单的倒数计时器mm:ss

时间:2015-08-19 05:56:05

标签: javascript html5 countdowntimer

我想创建一个简单的倒数计时器。

我找到了一些东西,它的工作时间分钟和秒钟,我只想要几分钟:秒......

如何为mm:ss格式制作相同的计时器?

var seconds;
var temp;

function countdown() {
     time = document.getElementById('countdown').innerHTML;
     timeArray = time.split(':')
     seconds = timeToSeconds(timeArray);

     if (seconds == '') {
          temp = document.getElementById('countdown');
          temp.innerHTML = "00:00:00";
          return;
     }

     seconds--;

     temp = document.getElementById('countdown');
     temp.innerHTML = secondsToTime(seconds);
     timeoutMyOswego = setTimeout(countdown, 1000);
}

function timeToSeconds(timeArray) {
     var minutes = (timeArray[0] * 60) + (timeArray[1] * 1);
     var seconds = (minutes * 60) + (timeArray[2] * 1);
     return seconds;
}

function secondsToTime(secs) {
     var hours = Math.floor(secs / (60 * 60));
     hours = hours < 10 ? '0' + hours : hours;

     var divisor_for_minutes = secs % (60 * 60);
     var minutes = Math.floor(divisor_for_minutes / 60);
     minutes = minutes < 10 ? '0' + minutes : minutes;

     var divisor_for_seconds = divisor_for_minutes % 60;
     var seconds = Math.ceil(divisor_for_seconds);
     seconds = seconds < 10 ? '0' + seconds : seconds;
     return hours + ':' + minutes + ':' + seconds;
}

countdown();

这是html

<div id="countdown">01:02:15</div>

2 个答案:

答案 0 :(得分:2)

    var seconds;  
    var temp;
    console.clear();

    function countdown() {
         time = document.getElementById('countdown').innerHTML;
         timeArray = time.split(':')
         seconds = timeToSeconds(timeArray);

         if (seconds == '') {
              temp = document.getElementById('countdown');
              temp.innerHTML = "00:00";

              return;
         }
         seconds--;
         temp = document.getElementById('countdown');
         temp.innerHTML= secondsToTime(seconds);
         timeoutMyOswego = setTimeout(countdown, 1000);        
    }

    function timeToSeconds(timeArray) {  
         var minutes = (timeArray[0] * 1);
         var seconds = (minutes * 60) + (timeArray[1] * 1);
         return seconds;
    }

    function secondsToTime(secs) {
         var hours = Math.floor(secs / (60 * 60));
         hours = hours < 10 ? '0' + hours : hours;
         var divisor_for_minutes = secs % (60 * 60);
         var minutes = Math.floor(divisor_for_minutes / 60);
         minutes = minutes < 10 ? '0' + minutes : minutes;
         var divisor_for_seconds = divisor_for_minutes % 60;
         var seconds = Math.ceil(divisor_for_seconds);
         seconds = seconds < 10 ? '0' + seconds : seconds;            
         return  minutes + ':' + seconds;   
    }

    countdown();

https://jsfiddle.net/santoshj/jex1f8uv/

答案 1 :(得分:1)

var countDownController = function(seconds){
  var countdownTimer = setInterval(startTimer, 1000);


  function startTimer(){
    var days        = Math.floor(seconds/24/60/60);
    var hoursLeft   = Math.floor((seconds) - (days*86400));
    var hours       = Math.floor(hoursLeft/3600);
    var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
    var minutes     = Math.floor(minutesLeft/60);
    var remainingSeconds = seconds % 60;
    if(minutes<10){
        minutes = "0"+ minutes;
    }
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
    }



    //        You can use which state you need!
    console.log(days+":"+minutes+":"+hours+":"+remainingSeconds)



    if (seconds == 0) {
        clearInterval(countdownTimer);

        //state for end timing
        alert('time is up');

    } else {
        seconds--;
    }
}
};

var timeToCountDown = 1232321;
countDownController(timeToCountDown);