使用JavaScript实现一个简单的倒计时组件_javascript UI组件-js教程-PHP中文网

使用JavaScript实现一个简单的倒计时组件_javascript UI组件

betcha

发布： 2025-11-01 19:28:01

原创

817人浏览过

答案：该倒计时组件通过JavaScript实现每秒更新显示，归零后触发回调。使用方法为调用createCountdown函数传入元素ID、初始秒数和结束回调，支持重置与样式扩展，结构清晰且轻量实用。

使用javascript实现一个简单的倒计时组件_javascript ui组件

实现一个简单的倒计时组件，关键在于定时更新显示时间，并在倒计时结束后触发回调。下面是一个基于原生 JavaScript 编写的轻量级倒计时 UI 组件，无需依赖任何框架，可直接嵌入网页使用。

倒计时组件的基本结构

组件由 HTML 容器、CSS 样式和 JavaScript 逻辑三部分组成。我们先定义一个用于显示倒计时的 DOM 元素：

这个 div 将实时显示剩余秒数。

JavaScript 倒计时逻辑

以下是核心 JavaScript 代码，封装成一个可复用的函数：

立即学习“Java免费学习笔记（深入）”；

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

function createCountdown(elementId, seconds, onEnd) {
  const element = document.getElementById(elementId);
  let remaining = seconds;

  // 更新显示
  function updateDisplay() {
    element.textContent = remaining;
  }

  // 开始倒计时
  const timer = setInterval(() => {
    remaining--;
    updateDisplay();

    if (remaining <= 0) {
      clearInterval(timer);
      if (onEnd && typeof onEnd === 'function') {
        onEnd();
      }
    }
  }, 1000);

  // 初始化显示
  updateDisplay();

  // 返回控制方法（可选）
  return {
    pause: () => clearInterval(timer),
    reset: (newSeconds) => {
      remaining = newSeconds || seconds;
      updateDisplay();
    }
  };
}

登录后复制

如何使用这个组件

在页面加载完成后调用函数启动倒计时：

window.onload = function() {
  createCountdown('countdown', 10, function() {
    document.getElementById('countdown').textContent = '时间到！';
    alert('倒计时结束');
  });
};

登录后复制

这段代码会从 10 开始倒数，每秒减 1，归零后显示“时间到！”并弹出提示。