Question

我需要一个简单的倒计时来倒计时30秒，但我希望在30秒结束时再次开始倒计时。

倒计时仅开始一次，倒计时不重启

我无法做到这一点，这是我的代码：

＆＃13;

var i = 1;
  function Countdown(options) {
  var timer,
  instance = this,
  seconds = options.seconds || 10,
  updateStatus = options.onUpdateStatus || function () {},
  counterEnd = options.onCounterEnd || function () {};

  function decrementCounter() {
    updateStatus(seconds);
    if (seconds === 0) {
  instance.stop();
  counterEnd();
  return; 
}
    seconds--;
  }

  this.start = function () {
    
    timer = 0;
    seconds = options.seconds;
    timer = setInterval(decrementCounter, 1000);
  };

  this.stop = function () {
    clearInterval(timer);
  };
}





var myCounter = new Countdown({  
    seconds:5,  // number of seconds to count down
    onUpdateStatus: function(sec){$('#countdown').html(sec);}, // callback for each second
    onCounterEnd: function(){    
  myCounter.start();
    } // final action
});

myCounter.start();
$("#button").click(function() {
  myCounter.start();
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="countdown"></p>
 <button type="button" id="button">restart</button>

＆＃13;

你知道如何解决这个问题吗？

由于

Answer 1

这是我过去使用过的。

JSFiddle

var refreshTime = 30,   //Total refresh time
    failTime = 30,      //Refresh time 
    timer,              //Holds the interval
    counter;            //Holds the count number (Seconds)


$(document).ready(function(){
    counter = refreshTime;
    $('#time').text(counter+" ");

    timer = setInterval(countDown, 1000);
});


function countDown(){
    $("#time").html(counter+" ");
    if(counter == 0){
          counter = failTime;
    }else{
        counter--;
    }
}

Answer 2

您在回电后致电counter.stop。所以你开始然后立即停止新柜台。像这样切换订单

if (seconds === 0) {
  instance.stop();
  counterEnd();
  return; // don't want to decriment after counterEnd();
}

Answer 3

window.setInterval(function(){
  myCounter.start();
}, 30000);

希望这有帮助

Answer 4

只需对代码进行一些小修改即可使其正常工作：

var i = 1;
function Countdown(options) {
  var timer,
  instance = this,
  seconds = options.seconds || 10,
  updateStatus = options.onUpdateStatus || function () {},
  counterEnd = options.onCounterEnd || function () {};

  function decrementCounter() {
    updateStatus(seconds);
    if (seconds === 0) {    
        seconds = 5;
    } else {
        seconds--;
    }
  }

  this.start = function () {
    clearInterval(timer);
    timer = 0;
    seconds = options.seconds;
    timer = setInterval(decrementCounter, 1000);
  };
}

var myCounter = new Countdown({  
    seconds: 5,  // number of seconds to count down
    onUpdateStatus: function(sec){$('#countdown').html(sec);}, // callback for each second
    onCounterEnd: function(){  myCounter.start(); } // final action
});

myCounter.start();

https://jsfiddle.net/6fc14935/

Answer 5

刚刚写了这个fiddle以获得乐趣：

function mySwitch() {
    button = document.getElementById("button");
    number = document.getElementById("number");
    startnumber = number.value;
    if (button.value == "Start") {
        button.value = "Stop";
        myInterval = setInterval(function () {myCounter()},1000);
    }else{
        button.value = "Start";
        clearInterval(myInterval);
    }
}

function myCounter() {
    if (number.value > 0) {
        number.value = number.value -1;
    }else{
        number.value = startnumber;
    }
}

如何定义一个在Javascript中自动重启的简单倒计时

5 个答案: