<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Jquery实现倒计时效果</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var SysSecond;
var InterValObj;
$(document).ready(function() {
SysSecond = parseInt($("#remainSeconds").html()); //这里获取倒计时的起始时间
InterValObj = window.setInterval(SetRemainTime, 1000); //间隔函数，1秒执行
});
//将时间减去1秒，计算天、时、分、秒
function SetRemainTime() {
if (SysSecond > 0) {
SysSecond = SysSecond - 1;
var second = Math.floor(SysSecond % 60); // 计算秒
var minite = Math.floor((SysSecond / 60) % 60); //计算分
var hour = Math.floor((SysSecond / 3600) % 24); //计算小时
var day = Math.floor((SysSecond / 3600) / 24); //计算天
$("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒");
} else {//剩余时间小于或等于0的时候，就停止间隔函数
window.clearInterval(InterValObj);
//这里可以添加倒计时时间为0后需要执行的事件
}
}
</script>
</head>
<body>
<div id="remainSeconds" style="display:none">360000</div>
<div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div>
</body>
</html>
分享到：
相关推荐
- 通过将毫秒数转换为天、小时、分钟和秒，我们可以构建出倒计时的显示格式。 3. **jQuery实现**： - 使用jQuery选择器选取需要展示倒计时的元素，如`$("#countdown")`。 - 创建一个`setInterval`函数，每秒更新...
在本文中，我们将深入探讨如何实现一个基于jQuery的翻牌倒计时效果。这个效果通常用于网站或应用中，以创建吸引用户注意力的倒计时计时器，比如促销活动的截止时间显示或者赛事倒计时等。我们将讨论jQuery库的基础...
这个特定的示例“设置几天、小时、分钟、秒等属性只需修改到期时间-20130724”意味着开发者可以通过调整JavaScript代码中的特定日期（例如2013年7月24日）来设定倒计时的结束点，倒计时将显示为天数、小时、分钟和秒...
今天我们将详细探讨一个jQuery倒计时插件——jQueryCountdown，它能够为网站添加引人注目的倒计时效果。 首先，我们需要理解jQueryCountdown的基本原理。这个插件基于JavaScript的时间处理函数，通过计算当前时间与...
JQuery倒计时插件是Web开发中常用的一种工具，它可以帮助开发者在网页上实现动态的时间显示，例如倒计时至某个特定日期或时间。这种插件通常基于JavaScript库JQuery构建，因为JQuery简化了DOM操作和事件处理，使得...
本文将详细讲解如何利用jQuery实现一个倒计时功能，并着重阐述如何设置几天、小时、分钟和秒等属性，以及如何在倒计时结束后显示特定提示。 首先，我们需要理解倒计时的基本原理。倒计时是通过计算当前时间与设定...
- **格式化显示**：可以增加选项来控制显示格式，比如天、小时、分钟和秒。 - **回调函数**：允许用户在倒计时结束时提供自定义的回调函数。 - **暂停/恢复**：添加方法让开发者能够暂停或恢复倒计时。 - **实时更新...
然后，它会设置一个定时器（可能使用`setInterval`函数），每隔一定时间更新倒计时显示。倒计时计算涉及日期对象的处理，例如`Date`对象的`getTime()`方法用于获取当前时间戳，然后与目标日期的时间戳进行比较，计算...
6. **自定义样式**：根据需求，可以通过CSS调整倒计时显示的样式，以适应网站的整体设计。 7. **测试和调试**：运行网页，观察倒计时是否正常工作。如有问题，进行调试和修复。 这个“简单的jquery倒计时插件”...
jQuery倒计时插件是一种基于JavaScript库jQuery的实用工具，用于在网页上实现动态的、实时更新的时间显示功能。这种插件通常用于事件预告、限时促销、考试倒计时等场景，为用户提供一种直观的方式了解特定时间点的...
本篇文章将详细探讨标题中的"三种颜色的jQuery倒计时插件"，并结合标签"JS特效-日期时间"，深入讲解如何利用jQuery创建具有视觉吸引力的倒计时效果。 首先，jQuery倒计时插件的原理主要是通过获取当前系统时间，并...
插件会每秒更新倒计时显示，并在到达结束时间时调用提供的回调函数。在回调函数中，你可以添加任何需要在倒计时结束后执行的 JavaScript 代码，比如页面跳转或其他业务逻辑。 综上所述，通过结合 jQuery 的便利性和...
3. **设置定时器**：使用setInterval函数，每隔一定时间（例如1毫秒）更新倒计时显示。 4. **格式化时间**：将剩余时间转换为天、小时、分钟和秒的格式，甚至可以精确到毫秒。需要考虑时间的进位，比如当秒数满60时...
jQuery倒计时器是一种在网页上实现动态时间显示的工具，它基于JavaScript库jQuery构建，为用户提供了一种简便的方式来创建自定义的倒计时功能。这个功能广泛应用于各种场景，如活动预告、考试倒计时、限时优惠结束...
本文将详细解析"jquery倒计时源码"这一主题，旨在帮助开发者理解和实现自己的倒计时功能。 倒计时是网页应用中常见的功能，常用于活动开始时间预告、考试倒计时等场景。jQuery提供了丰富的API和方法，使得创建倒...
在本文中，我们将深入探讨jQuery倒计时插件及其6种不同的倒计时效果。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作和Ajax交互。倒计时功能在网页中有着广泛的应用，如在线考试、产品...
它允许开发者设定一个结束时间点，然后在网页上以动态更新的方式显示剩余时间，通常以天、小时、分钟和秒的形式。在这个项目中，`jquery.countdown.js`负责计算并实时更新倒计时的显示。 3. **HTML源码**：HTML（超...
许多jQuery倒计时插件允许开发者自定义样式，通过CSS控制倒计时显示的外观。同时，插件通常会提供事件回调，如`onEnd`，当倒计时结束时触发，可用于执行特定操作，例如显示倒计时结束的提示信息。 五、拓展应用 ...
**jQuery倒计时插件详解** 在Web开发中，倒计时功能经常被用于各种场景，比如活动预告、考试倒计时或者定时发布等。jQuery作为一个轻量级且功能强大的JavaScript库，为开发者提供了实现倒计时功能的便利。本篇文章...