基于这里的版本修改,感谢原作者
http://www.iteye.com/topic/785609
改成了 hh:mm:ss 形式的倒计时
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<div class="t"></div>
</body>
</html>
<script type="text/javascript">
$(function(){
$.fn.countDown = function(settings,hh,mm,ss) {
if(typeof ss=='undefined') { hh = settings.hh;mm = settings.mm;ss = settings.ss; }
this.data("CR_currentTime_hh",hh);
this.data("CR_currentTime_mm",mm);
this.data("CR_currentTime_ss",ss);
var to=(hh<10?'0'+hh:hh)+":"+(mm<10?'0'+mm:mm)+":"+(ss<10?'0'+ss:ss);
if(ss==0&&(mm>0||hh>0)){
if(mm>0){
mm-=1;
}else if(mm==0&&hh>0){
hh-=1;
mm+=59;
}
ss+=60;
}
$(this).text(to).animate({"none":"none"},settings.duration,'',function() {
if(hh!=0||mm!=0||ss!=0) {
$(this).countDown(settings,hh,mm,ss- 1);
}else{
settings.callBack(this);
}
});
return this;
};
$.fn.CRcountDown = function(settings) {
settings = jQuery.extend({
hh:0,
mm:0,
ss:0,
startNumber: 10,
endNumber: 0,
duration: 1000,
callBack: function() { }
}, settings);
this.data("CR_hh",settings.hh);
this.data("CR_mm",settings.mm);
this.data("CR_ss",settings.ss);
this.data("CR_duration",settings.duration);
this.data("CR_callBack",settings.callBack);
return this.stop().countDown(settings);
};
$.fn.pause = function(settings) {
return this.stop();
};
$.fn.reStart = function() {
return this.pause().CRcountDown({
hh : this.data("CR_currentTime_hh"),
mm : this.data("CR_currentTime_mm"),
ss : this.data("CR_currentTime_ss"),
duration : this.data("CR_duration"),
callBack : this.data("CR_callBack")
});
};
})
$(function (){
$(".t").CRcountDown({mm:1,ss:10,callBack:function(){
alert("time over");
}});
});
</script>
分享到：
相关推荐
这个扩展方法的灵活性使得我们可以根据需要调整日期和时间的显示格式，不仅限于"yyyy-MM-dd HH:mm:ss"，还可以是其他任何自定义的格式。 总结一下，JavaScript中的Date对象提供了丰富的日期和时间操作方法，通过...
var endDateTime = new Date('YYYY', 'MM', 'DD', 'HH', 'mm', 'ss'); // 设置倒计时结束的具体时间 $('#countdown').countdown(endDateTime, function(event) { $(this).text(event.strftime('%Y年%m月%d日 %H时...
format: "dd天hh:mm:ss" // 设置日期格式 }); }); ``` 以上代码创建了一个从当前时间到指定日期的倒计时组件，展示了如何在网页中使用这个插件。 **拓展应用：** 除了基本的倒计时功能，该插件还可以与其他...
3. 时间格式化：可以按照用户需求设置时间显示格式，如“DD天HH小时MM分SS秒”或“HH:mm:ss”等。 4. 时间到达后的回调函数：当倒计时结束时，可以触发一个回调函数执行特定的操作，如弹出提示框或跳转到其他页面。 ...
例如，用户可以通过设置`format`选项来决定时间显示的格式，如"天:小时:分钟:秒"或"HH:mm:ss"。 此外，为了提高用户体验，插件可能还包括了一些优化措施，如防止在倒计时结束后继续执行定时器，或者在页面刷新后...
- `date`: 必填，设置倒计时的结束日期和时间，格式为'YYYY/MM/DD HH:MM:SS'。 - `offset`: 可选，设置时区偏移量，如'GMT+8'表示东八区，'GMT-5'表示西五区。默认值为'GMT+0'，即格林尼治标准时间。 - `timezone`: ...
var targetDate = new Date('YYYY-MM-DD HH:mm:ss'); // 设置您的活动最后到期时间 var countdownInterval = setInterval(updateCountdown, 1000); // 每秒执行一次updateCountdown函数 ``` 2. **计算倒计时**：...
- `format`：定义倒计时的显示格式，如"DD天HH小时MM分SS秒"。 - `onEnd`：倒计时结束时触发的回调函数。 - `displaySeconds`：是否显示秒数，可选值为`true`或`false`。 ### 五、拓展应用 1. **多实例**：在同一...
这里，`class="countdown"` 是指定了倒计时插件作用的元素，`data-end-time` 是自定义数据属性，用来存储倒计时的结束时间，格式为`YYYY-MM-DD HH:MM:SS`。 ### 5. 源码分析 由于没有提供具体的源码，我们将以一个...
1. 保持时间格式一致：目标日期必须遵循规定的格式，如"YYYY-MM-DD HH:MM:SS"，否则可能导致插件无法正确解析。 2. 考虑时区差异：如果目标日期是服务器时间，需考虑客户端与服务器之间的时区差异。 3. 性能优化：...
4. **格式化时间**：根据需求将剩余时间转换为合适的格式，如“HH:mm:ss”或“DD天HH小时mm分钟ss秒”。 5. **DOM操作**：使用jQuery选择并更新DOM元素中的时间文本，显示倒计时。 6. **结束处理**：当倒计时结束...
1. **设置目标时间**：倒计时的目标时间通常是一个未来的时间点，可以是日期对象或者字符串格式（如"YYYY-MM-DD HH:MM:SS"）。你需要确定这个时间，并将其存储在一个变量中。 2. **创建计时器**：使用`setInterval`...
- **end**：倒计时结束的时间，可以是Unix时间戳或者日期字符串（如'YYYY-MM-DD HH:MM:SS'）。 - **format**：倒计时的显示格式，可以包含'd'天、'H'小时、'm'分钟和's'秒，自定义单位之间用空格分隔。 - **onEnd**...
format: "DD HH:mm:ss", // 时间格式 onExpiry: function() { // 倒计时结束时的回调函数 alert("倒计时结束！"); } }); ``` 此外，jQuery.countdown还支持其他高级特性，如周期性更新（interval）、自定义...
这里需要设置目标日期（例如，'YYYY-MM-DD HH:MM:SS'格式），然后使用`setInterval`函数每秒更新时间。 ```javascript $(document).ready(function() { var targetDate = new Date("2023-12-31 23:59:59"); // ...
这通常需要以特定格式（如"YYYY-MM-DD HH:MM:SS"）输入，然后在JavaScript中解析成Date对象。 4. **多风格支持**: 这个插件提供多种视觉样式，可能包括不同的字体、颜色、布局和动画效果。实现这些风格可能涉及CSS...
- `format`：倒计时的显示格式，例如"DD天HH时MM分SS秒"。 - `onExpiry`：到达结束时间时执行的函数。 - `onTick`：在每个时间间隔（秒）结束时执行的函数，可用于实时更新界面。 ### 实用技巧 1. **动态设置时间*...
format: 'hh:mm:ss' // 计时格式，如需显示小时 }); }); ``` 4. **操作计时器**：通过API提供的方法来控制计时器，如`start()`、`pause()`和`reset()`。 5. **自定义样式**：根据需求修改或添加CSS样式，以...
用户可以自定义倒计时结束的时间点（Edate）和倒计时开始的时间（Sdate），这些时间均以“YYYY-MM-DD HH:MM:SS”的格式进行设定。 倒计时插件的核心是一个定时器，它会在设定的结束时间点之前，以每秒为单位不断...