如何用倒計時重繪特定的div

我的.container2div 中有倒計時，但是當我嘗試重新加載該特定容器時，它會完美地重新加載，但我的倒計時沒有出現，而且按鈕也被禁用..

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

uj5u.com熱心網友回復：

你想做什么？是這樣的嗎？
當按下重新加載按鈕時，重新加載 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>

uj5u.com熱心網友回復：

你只呼叫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
}

標籤：

上一篇：我在laravel中使用select2multiselect下拉選單。單擊選擇所有值在laravel中被選中？

下一篇：如何根據另一個陣列排列帶有物件的陣列？