当前位置：首页 > jquery

jquery倒计时代码

2026-03-17 11:25:21jquery

jQuery倒计时代码实现

以下是几种常见的jQuery倒计时实现方式，适用于不同场景需求。

基础倒计时（固定时间）

$(document).ready(function() {
  let count = 10; // 初始秒数
  const countdown = setInterval(function() {
    $("#countdown").text(count);
    count--;
    if (count < 0) {
      clearInterval(countdown);
      $("#countdown").text("时间到！");
    }
  }, 1000);
});

HTML部分需包含：

<div id="countdown">10</div>

指定目标时间的倒计时

计算到未来某个时间点的剩余时间：

function updateCountdown(endDate) {
  const now = new Date();
  const diff = endDate - now;

  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const secs = Math.floor((diff % (1000 * 60)) / 1000);

  $("#countdown").html(`${days}天 ${hours}时 ${mins}分 ${secs}秒`);

  if (diff <= 0) {
    clearInterval(timer);
    $("#countdown").html("活动已结束");
  }
}

const endDate = new Date("2023-12-31 23:59:59");
const timer = setInterval(() => updateCountdown(endDate), 1000);

带样式的倒计时

添加CSS美化显示效果：

#countdown {
  font-size: 2em;
  color: #ff5722;
  text-align: center;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 5px;
}

用户交互式倒计时

允许用户输入倒计时时间：

$("#startBtn").click(function() {
  const minutes = parseInt($("#minutesInput").val()) || 0;
  let seconds = minutes * 60;

  const timer = setInterval(function() {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;

    $("#countdown").text(`${mins}:${secs < 10 ? '0' : ''}${secs}`);
    seconds--;

    if (seconds < 0) {
      clearInterval(timer);
      alert("时间到！");
    }
  }, 1000);
});

对应HTML：

jquery倒计时代码

<input type="number" id="minutesInput" placeholder="输入分钟数">
<button id="startBtn">开始倒计时</button>
<div id="countdown"></div>

注意事项

使用clearInterval()防止内存泄漏
移动端建议使用CSS媒体查询优化显示
服务器时间同步问题可通过AJAX获取解决
时区处理建议使用UTC时间避免地域差异

以上代码可根据实际需求调整时间格式、显示样式或触发逻辑。

标签: 倒计时代码

分享给朋友：

php实现文件下载代码

实现文件下载的基本方法使用PHP实现文件下载的核心是通过设置HTTP头部信息，强制浏览器触发下载行为而非直接显示文件内容。 $file_path = 'path/to/your/file.ext'…

vue分页代码实现

Vue 分页代码实现在 Vue 中实现分页功能通常需要结合后端 API 返回的数据和前端的分页组件。以下是一个完整的实现示例，包括分页组件的封装和与后端数据的交互。分页组件封装创建一个可复用的…

vue论坛代码实现

Vue 论坛代码实现项目初始化使用 Vue CLI 或 Vite 创建一个新的 Vue 项目。推荐使用 Vue 3 和 Composition API。 npm create vue@lates…

vue实现商品列表代码

以下是一个基于Vue.js的商品列表实现示例，包含基础功能如数据渲染、分页和筛选：基础商品列表渲染 <template> <div class="product-list"&…

vue 实现点击复制代码

vue 实现点击复制功能使用Vue实现点击复制功能可以通过原生JavaScript的document.execCommand或现代的Clipboard API。以下是几种常见实现方式：使用doc…

如何预览react代码

预览 React 代码的方法本地开发环境预览安装 Node.js 和 npm/yarn，通过 create-react-app 或 Vite 创建项目后，运行开发服务器（如 npm start）。…

jquery倒计时代码