Question

我正在进行简单的倒计时，当它为零时显示模态，然后在该模态上有另一个倒计时，它将在零时关闭。

我想要的是再次重置第一个倒计时并执行相同的过程。

我怎样才能做到这一点？

希望你了解我。

感谢。

//declare start time
        var timer2 = "00 : 00 : 10";
        // timer2 = timer2.replace(/秒|_/g,'')


        //intercal for seconds
        var interval = setInterval(function() {
          //timer will be [hour, minute, second]
          var timer = timer2.split(':');
          var hour = parseInt(timer[0], 10);
          var minutes = parseInt(timer[1], 10);
          var seconds = parseInt(timer[2], 10);
          //reduce second by one
          --seconds;
          //calculate new minute and hours
          minutes = (seconds < 0) ? --minutes : minutes;

          if (minutes < 0) {


            minutes = 00;
            seconds = 00;
            clearInterval(interval);

            $('#informationModal').fadeIn();

        var timeleft = 4;
        var downloadTimer = setInterval(function(){
        timeleft--;
        $('.sec').text(timeleft);

        if(timeleft == 0){
            clearInterval(downloadTimer);
            $('#informationModal').fadeOut();
            minutes = 00;
            seconds = 10;
        }
    },1000);


          }

          seconds = (seconds < 0) ? 59 : seconds;
          seconds = (seconds < 10) ? '0' + seconds : seconds;
          minutes = (minutes < 0) ? 59 : minutes;
          minutes = (minutes < 10) ? '0' + minutes : minutes;
          hour = (hour < 0) ? 59 : hour;
          hour = (hour < 10) ? '0' + hour : hour;


          timer2 = hour + ':' + minutes + ':' + seconds;
          $('#countdown').html(timer2);

        }, 1000);

Answer 1

这是为了让您了解如何通过在函数中对代码进行范围设定来解决问题，然后反复调用该函数。

var timer2 = "00 : 00 : 5";
var hour = 0;
var minutes = 0;
var seconds = 0;

var setupTime = function(time){
  let timer = time.split(':');
  hour = parseInt(timer[0], 10);
  minutes = parseInt(timer[1], 10);
  seconds = parseInt(timer[2], 10);
}

setupTime(timer2);


var myFunction = function(){
  var interval = setInterval(function() {
    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;
    if (minutes < 0 && seconds < 0) {
      clearInterval(interval);
      $('#informationModal').fadeIn();
      var timeleft = 4;
      var downloadTimer = setInterval(function(){
        timeleft--;
        $('.sec').text(timeleft);

        if(timeleft == 0){
         clearInterval(downloadTimer);
          $('#informationModal').fadeOut();
          // resetTimer and call myFunction to start again
          setupTime(timer2);
          myFunction();
        }
      },1000);
    } else {
        $('#countdown').html(seconds);
    }
  }, 1000);
};

myFunction();

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="countdown"></div>


<!-- The Modal -->
<div id="informationModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    
    <p>Some text in the Modal..<span class="sec"></span></p>
  </div>

</div>

如果将变量从整数更改为字符串，则需要注意变量。这就是00:00:00时间不可见的原因，但你会弄清楚如何解决这个问题。

旁注：如果你问一个问题。只要您需要提供“干净”的代码，请始终检查您的缩进并修复它们。因为修补缩进来回答问题并不好玩。

Answer 2

最简单的方法是将所有内容包装到函数中，并在fadeOut模态完成时再次调用该函数。

$('#informationModal').fadeOut(400, startTimer);

＆＃13;

function startTimer() {
    //declare start time
    var timer2 = "00 : 00 : 10";
    // timer2 = timer2.replace(/秒|_/g,'')
    //intercal for seconds
    var interval = setInterval(function() {
        //timer will be [hour, minute, second]
        var timer = timer2.split(':');
        var hour = parseInt(timer[0], 10);
        var minutes = parseInt(timer[1], 10);
        var seconds = parseInt(timer[2], 10);
        //reduce second by one
        --seconds;
        //calculate new minute and hours
        minutes = (seconds < 0) ? --minutes : minutes;

        if (minutes < 0) {


            minutes = 00;
            seconds = 00;
            clearInterval(interval);

            $('#informationModal').fadeIn();

            var timeleft = 4;
            var downloadTimer = setInterval(function() {
                timeleft--;
                $('.sec').text(timeleft);

                if (timeleft == 0) {
                    clearInterval(downloadTimer);
                    $('#informationModal').fadeOut(400, startTimer);
                    minutes = 00;
                    seconds = 10;
                }
            }, 1000);


        }

        seconds = (seconds < 0) ? 59 : seconds;
        seconds = (seconds < 10) ? '0' + seconds : seconds;
        minutes = (minutes < 0) ? 59 : minutes;
        minutes = (minutes < 10) ? '0' + minutes : minutes;
        hour = (hour < 0) ? 59 : hour;
        hour = (hour < 10) ? '0' + hour : hour;


        timer2 = hour + ':' + minutes + ':' + seconds;
        $('#countdown').html(timer2);

    }, 1000);
}

startTimer();

＆＃13;

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="countdown"></div>


<!-- The Modal -->
<div id="informationModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    
    <p>Some text in the Modal..<span class="sec"></span></p>
  </div>

</div>

＆＃13;

在第二次倒计时后重置第一次倒计时

2 个答案: