使用甜蜜警報插件的setInterval函數倒計時

我試圖實現倒計時到sweetAlert。在不活動20分鐘後，會彈出甜蜜警報並顯示會話即將超時，並且用戶有兩種選擇：註銷或繼續，這將重新啓動空閒計時器。當鼠標移動或點擊時，空閒計時器也會重置。我的問題是，我希望在自動註銷之前在60-0（秒）內在sweetAlert標題的範圍（title: "Teie sessioon on aegumas <span id='secondsLeft'></span> sekundi pärast!",）中顯示倒計時。我嘗試了所有的方法，但沒有奏效。倒計時顯示，但沒有重新啓動。使用甜蜜警報插件的setInterval函數倒計時

任何幫助，將不勝感激。

 $(document).ready(function() { 
      var idleTime = 0; 
      //Zero the idle timer on mouse movement 

      function timerIncrement() { 
       idleTime ++; 
       if (idleTime >= 5) { // For testing 5 seconds else 20 minutes 
         swal({ 
         html: true, 
         title: "Teie sessioon on aegumas <span id='secondsLeft'></span> sekundi pärast!", 
         text: "Sessiooni pikendamiseks vajutage nuppu Jätka, välja logimiseks vajutage Välju." , 
         type: "warning", 
         showCancelButton: true, 
         confirmButtonColor: "#DD6B55", 
         confirmButtonText: "Jätka", 
         cancelButtonText: "Välju", 
         timer: 60000, //3600 
         closeOnConfirm: false, 
         closeOnCancel: false }, function(isConfirm){ 
         if (isConfirm) {  
          swal("Jätkatud!", 
           "Teie sessiooni pikendati 1 tunni võrra.", 
           "success"); 

         } else {  
          swal("Väljutud", 
           "Teid suunatakse tagasi sisselogimis lehele", 
           "error"), 
           location.href = "logout.php?logout=true"; 
         } 
        }); 
       } 
      } 
      //Increment the idle time counter every minute. 
      var idleInterval = setInterval(timerIncrement, 1000); // 1 minute 

      $(this).mousemove(function (e) { 
       idleTime = 0; 
      }); 
      $(this).keypress(function (e) { 
       idleTime = 0; 
      }

來源

2016-03-01 raqulka

做你找到答案了嗎？ – khakiout

@khakiout no sir。仍在試圖弄清楚。有任何想法嗎？ – raqulka

試試這個，發生了什麼你的代碼，現在是，sweetAlert插件被重新每一秒。如果這就是你打算髮生的事情，你可以使用它。

該片段利用countDown變量與sweetAlert插件的title屬性一起顯示。每次調用timerIncrement()時，將重新創建sweetAlert插件，並且countDown遞減。

$(document).ready(function() { 
    var idleTime = 0; 
    var countDown = 20; //assuming countdown is 20 seconds 

    function timerIncrement() { 
    idleTime++; 
    if (idleTime >= 5) { // For testing 5 seconds else 20 minutes 
     swal({ 
     html: true, 
     title: "Teie sessioon on aegumas " + countDown + " pärast!", 
     ... // other configs 
     }); 
     countDown--; 
    } 
    } 
    //Increment the idle time counter every minute. 
    var idleInterval = setInterval(timerIncrement, 1000); // 1 minute 

    $(this).mousemove(function(e) { 
    idleTime = 0; 
    resetCountdown(); //reset 
    }); 
    $(this).keypress(function(e) { 
    idleTime = 0; 
    resetCountdown(); //reset 
    }); 

    function resetCountdown() { 
    countDown = 20; 
    } 
});

來源

2016-03-01 10:00:04 khakiout

立即嘗試！ – raqulka

確實有效！我也瞭解解決方案。優秀的解釋。還有一個問題。我如何將這個應用到所有頁面？ – raqulka

@raqulka你只需要在所有頁面中包含腳本。它應該可以正常工作。 – khakiout

<script> 
$(document).ready(function() { 
    var closeInSeconds = 5, 
     displayText = "I will close in #1 seconds.", 
     timer; 

    swal({ 
     title: "Auto close alert!", 
     html: "<p class='Alert'>Hello</p>", 
     timer: closeInSeconds * 1000, 
     showConfirmButton: false 
    }); 

    timer = setInterval(function() { 

     closeInSeconds--; 

     if (closeInSeconds < 0) { 

      clearInterval(timer); 
     } 

     $('.Alert').html(displayText.replace(/#1/, closeInSeconds)); 

    }, 1000); 
}); 
</script>

來源

2017-09-29 23:46:35 Shamim

在html頁面上覆制過去，但必須先引用javascript和sweetalert css和js文件。 – Shamim

使用甜蜜警報插件的setInterval函數倒計時

回答

相關問題