Jquery对话框模式倒计时

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

<button id="open-dialog">Open Dialog</button>

$("#open-dialog").on("click", function() {
  $("<div>倒计时: <span id='countdown'></span> 秒</div>").dialog({
    title: "倒计时对话框",
    modal: true,
    width: 400,
    closeOnEscape: false,
    open: function(event, ui) {
      // 倒计时开始时间
      var startTime = new Date().getTime();
      
      // 倒计时持续时间，单位：秒
      var duration = 60;
      
      // 更新倒计时显示的函数
      function updateCountdown() {
        var currentTime = new Date().getTime();
        var remainingTime = Math.max(0, duration - Math.floor((currentTime - startTime) / 1000));
        $("#countdown").text(remainingTime);
        
        if (remainingTime > 0) {
          setTimeout(updateCountdown, 1000); // 每秒更新一次倒计时
        } else {
          // 倒计时结束后的操作
          // ...
        }
      }
      
      // 第一次更新倒计时显示
      updateCountdown();
    },
    close: function(event, ui) {
      // 对话框关闭时的操作
      // ...
    }
  });
});