甜蜜的警惕。在警示框中顯示倒計時

我在使用sweetalert消息顯示倒計時時遇到問題。點擊後，我使用「帶自動關閉計時器的消息」。我希望倒計時在消息中，用戶可以看到倒計時。甜蜜的警惕。在警示框中顯示倒計時

swal({ 
    title: "Please w8 !", 
    text: "Data loading...", 
    timer: 10000, 
    showConfirmButton: false 
});

來源

2016-04-27 Filip Martiak

我不認爲這是可能不改變庫。也許[這個答案類似的問題]（http://stackoverflow.com/questions/35718899/countdown-in-setinterval-function-with-sweet-alert-plugin）可以爲你工作。 – michaPau

看到我的答案。你會發現完整的解決方案（： –

這是不可能與SweetAlert做。它不支持在UI上計數。但絕不說:-)

我準備了一些小技巧，它可以幫助你做到這一點。只需將以下代碼添加到您的應用程序中，即可看到實時計數機制。並且不要忘記添加jQuery。

var 
    closeInSeconds = 5, 
    displayText = "I will close in #1 seconds.", 
    timer; 

swal({ 
    title: "Auto close alert!", 
    text: displayText.replace(/#1/, closeInSeconds), 
    timer: closeInSeconds * 1000, 
    showConfirmButton: false 
}); 

timer = setInterval(function() { 

    closeInSeconds--; 

    if (closeInSeconds < 0) { 

     clearInterval(timer); 
    } 

    $('.sweet-alert > p').text(displayText.replace(/#1/, closeInSeconds)); 

}, 1000);

結果：

來源

2016-04-27 12:12:21

WOW hack進展得非常好，非常感謝！它正在做我想要的東西...... :) –

這真是太神奇了。簡單的解決方案，但真的很聰明。不會自己拿出來，但很容易定製和理解。 +1！ –

這裏是更好的解決方案

var timer = 10, // timer in seconds 
    isTimerStarted = false; 

(function customSwal() { 
    swal({ 
     title: "Please w8 !", 
     text: "Data loading..." + timer, 
     timer: !isTimerStarted ? timer * 1000 : undefined, 
     showConfirmButton: false 
    }); 
    isTimerStarted = true; 
    if(timer) { 
     timer--; 
     setTimeout(customSwal, 1000); 
    } 
})();

來源

2016-04-27 12:35:29

快速和酷... thx – NoBody

甜蜜的警惕。在警示框中顯示倒計時

回答

相關問題