如何在 jQuery 对话框按钮中添加倒数计时器

Question

我试图弄清楚如何在 jQuery UI 对话框的按钮文本中添加倒计时，但找不到任何东西。一段时间后，我编写了一个解决问题的方法。

Answer 1

以下是执行此操作的代码：

function jqAlert(message, time) {
            var counter = time;
            $( "#dialog" ).dialog({
               title: "Message From Web App",
               modal: true,
               resizable: true,
               autoOpen: true, 
               modal: true,
               buttons: {
                    "OK": {
                        text: "OK (" + (time / 1000)+ ")" ,
                        id: "btnDialogOK",
                        click: function(){
                            $('#dialog').dialog('close');
                        }
                    }
               },
               open: function(event, ui) {
                    countdown(time);
                    $(this).html(message);
                    setTimeout(function(){
                        $('#dialog').dialog('close');                
                    }, time);
                }
            });
         } 
         function countdown(time) {
            var timeleft = (time / 1000);
            var downloadTimer = setInterval(function(){
            timeleft--;
            document.getElementById("btnDialogOK").style.padding = "7px 18px 7px 18px";
            document.getElementById("btnDialogOK").textContent = "OK " + "(" + timeleft + ")";
            if(timeleft <= 0)
                clearInterval(downloadTimer);
            },1000);      
         }

从 onclick 中调用 jqAlert 方法：

jqAlert("This is an Alert", 5000);