html里的swal添加倒计时,甜蜜的警觉。在警告框中显示倒计时 - javascript代码 - 源码查...

问题

I have an issue with displaying the countdown in sweetalert message. After click i use the "A message with auto close timer". I want that countdown to be in the message and user can see the countdown.

swal({

title: "Please w8 !",

text: "Data loading...",

timer: 10000,

showConfirmButton: false

});

解决方法

It is impossible to do with SweetAlert. It doesn't support counting on UI. But never say never :-)

I have prepared a little hack, which can help you to do that. Just add the code below to your application, and you will see live counting mechanism. And don't forget to add jQuery too.

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

Result: