sweetalert2加载弹窗定时自动关闭显示剩余时间

最新推荐文章于 2025-11-15 04:36:54 发布

原创最新推荐文章于 2025-11-15 04:36:54 发布 · 9.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#sweetalert2

SweetAlert2 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用SweetAlert2库创建一个自动关闭的警告框，详细展示了如何将默认的毫秒级计时器修改为秒级，并通过代码片段解释了如何实现这一功能。

默认是毫秒级的

Swal.fire({
  title: 'Auto close alert!',
  html: 'I will close in <b></b> milliseconds.',
  timer: 2000,
  timerProgressBar: true,
  onBeforeOpen: () => {
    Swal.showLoading()
    timerInterval = setInterval(() => {
      const content = Swal.getContent()
      if (content) {
        const b = content.querySelector('b')
        if (b) {
          b.textContent = Swal.getTimerLeft()
        }
      }
    }, 100)
  },
  onClose: () => {
    clearInterval(timerInterval)
  }
}).then((result) => {
  /* Read more about handling dismissals below */
  if (result.dismiss === Swal.DismissReason.timer) {
    console.log('I was closed by the timer')
  }
})

改成秒级的

Swal.fire({
  title: 'Auto close alert!',
  html: 'I will close in <b></b> milliseconds.',
  timer: 2000,
  timerProgressBar: true,
  onBeforeOpen: () => {
    Swal.showLoading()
    timerInterval = setInterval(() => {
      const content = Swal.getContent()
      if (content) {
        const b = content.querySelector('b')
        if (b) {
          b.textContent = parseInt(Swal.getTimerLeft() / 1000)
        }
      }
    }, 100)
  },
  onClose: () => {
    clearInterval(timerInterval)
  }
}).then((result) => {
  /* Read more about handling dismissals below */
  if (result.dismiss === Swal.DismissReason.timer) {
    console.log('I was closed by the timer')
  }
})