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

How to define a simple countdown which restart automatically in Javascript

本文关键字：简单 一个 倒计时 重启 Javascript 定义      更新时间：2023-09-26

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

倒计时只开始一次，倒计时不会重新启动

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

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();
  });  
<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>

你知道怎么解决这个问题吗？？

感谢

以下是我过去使用过的内容。

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--;
    }
}

回拨后您正在呼叫counter.stop。因此，您先开始，然后立即停止新计数器。像这样切换订单

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

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

希望这能帮助

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

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/

写这个小提琴只是为了好玩：

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;
    }
}
相关文章：