如何使用倒计时刷新特定 div

Question

我的 .container2 div 中有倒计时，但是当我尝试重新加载该特定容器时，它的重新加载很完美，但我的倒计时没有显示，而且按钮也被禁用了..

<div id="container2">
        <h4 id="title">Type Data here</h4>
        <div class="controls">
            <div class="main-controls">
                <div class="dropdown">
                    <button
                        class="btn btn-primary dropdown-toggle" 
                        data-bs-toggle="dropdown"  id="btnCounter" disabled >
                        File <span id="count"></span>
                    </button>
                    <div class="dropdown-menu">
                        <button id="txt-btn" class="dropdown-item" onclick="refreshDiv();">
                            Save 
                        </button>
                    </div>
                </div>

      var spn = document.getElementById("count");
      var btn = document.getElementById("btnCounter");

       var count = 3; // Set count
        var timer = null; // For referencing the timer

            (function countDown() {
              // Display counter and start counting down
               spn.textContent = count;

            // Run the function again every second if the count is not zero
              if (count !== 0) {
            timer = setTimeout(countDown, 1000);
          count--; // decrease the timer
          } else {
        // Enable the button
          btn.removeAttribute("disabled");
          }
         }());

             function refreshDiv() {
               $('#container2').load(window.location.href + " #container2");
                }

Answer 1

您仅在初始时间调用 countDown() 函数，这就是问题所在。在按钮上再次单击调用 countDown() 函数 !

试试这个代码，它对你有帮助

var count = 3;     // Set count
var timer = null; // For referencing the timer

function countDown() {
  // Display counter and start counting down
  console.log(document.getElementById("count"), 'count');
  document.getElementById("count").textContent = count;

  // Run the function again every second if the count is not zero
  if (count !== 0) {
    timer = setTimeout(countDown, 1000);
    count--; // decrease the timer
  } else {
    // Enable the button
    document.getElementById("btnCounter").removeAttribute("disabled");
  }
}

countDown();

function refreshDiv() {
  $('#container2').load(location.href + " #container2");
  document.getElementById("btnCounter").setAttribute("disabled", true);
  count = 3;

  setTimeout(() => { 
    countDown();
  }, 10); // set page reload time  in timeout
}

Answer 2

你想做什么？是这样的吗？
当按下重新加载按钮时，重新加载 div 也在 div 中起作用？所以倒计时功能再次执行？
希望能帮到你，给你线索。

var spn = $("#count")
var btn = $("#btnCounter")
var myInterval
var count = 3 // Set count
var timer = null


// set interval without delay
function setIntervalImmediately(func, interval) {
    func();
    return setInterval(func, interval);
}



function countDown(sec){
        myInterval = setIntervalImmediately(function () {
            $('#count').text(sec--);
            if (sec == -1) {
                clearInterval(myInterval);
                    $('#count').text("");
                btn.removeAttr("disabled");
            }
            else{
                     btn.attr("disabled", "disabled")
            }
    }, 1000);
}

$(document).on("click", "#txt-btn", function(){
  clearInterval(myInterval);
    refreshDiv()
})

function refreshDiv(){
    $("#container2").load(location.href + " #container2");
  countDown(count)
}

$(document).ready(function(){
        countDown(count)
})

<div id="container2">
        <h4 id="title">Type Data here</h4>
        <div class="controls">
            <div class="main-controls">
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="btnCounter" disabled>
                        File <span id="count"></span>
                    </button>
                    <div class="dropdown-menu">
                        <button id="txt-btn" class="dropdown-item">
                            Save? do u mean reload?
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何使用倒计时刷新特定 div

how do I refresh specific div with countdown

html

javascript

css

ajax

jquery