JavaScript 实现简单的倒计时弹窗DEMO附图

由于我无法直接提供图片或执行JavaScript代码在网页上，我将为你提供一个简单的JavaScript代码示例，用于实现倒计时弹窗功能。你可以将这段代码放入HTML文件中，并在浏览器中打开以查看效果。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时弹窗DEMO</title>
<style>
  #countdown {
    font-size: 24px;
    margin-top: 20px;
  }
</style>
</head>
<body>

<div id="countdown">10</div>
<script>
function startCountdown(duration) {
  let countdownElement = document.getElementById('countdown');
  let interval = setInterval(function() {
    duration--;
    countdownElement.textContent = duration;
    if (duration <= 0) {
      clearInterval(interval);
      alert('时间到!');
    }
  }, 1000);
}

// 假设倒计时为10秒
startCountdown(10);
</script>

</body>
</html>

**解释**：

- 这段HTML代码定义了一个简单的页面，其中包含一个用于显示倒计时的`

`元素。

- JavaScript部分定义了一个`startCountdown`函数，它接受一个参数`duration`，表示倒计时的时间（以秒为单位）。

- 在`startCountdown`函数中，使用`setInterval`函数每秒更新`

`元素中的文本，直到倒计时结束。

- 当倒计时结束时，使用`clearInterval`停止定时器，并显示一个包含“时间到!”文本的弹窗。

你可以将这段代码复制到一个`.html`文件中，并用浏览器打开该文件来查看倒计时弹窗的效果。由于我无法直接提供附图，请按照上述说明在本地环境中测试代码。