倒计时 jquery countdown
来源:互联网 发布:mysql 进入数据库 编辑:程序博客网 时间:2024/06/07 01:56
1.jingjia.jsp中的内容
引入文件
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" />
<script type="text/javascript" src="resource/script/jquery-1.7.1.min.js"></script>
<script src="resource/script/assets/countdown/jquery.countdown.js"></script>
标签
<label>距结束:</label>
<p id="note"></p>
js代码
$(function(){
var note = $('#note'),
ts = new Date(2012, 0, 1),
newYear = true;
if((new Date()) > ts){
// The new year is here! Count towards something else.
// Notice the *1000 at the end - time must be in milliseconds
ts = endtimeemp;
newYear = false;
}
$('#countdown').countdown({
timestamp : ts,
callback : function(days, hours, minutes, seconds){
var message = "";
message +="<span id='time_d'>"+ days + "</span><em>天</em>" ;
message +="<span id='time_h'>"+ hours + "</span><em>时</em>" ;
message +="<span id='time_m'>"+ minutes + "</span><em>分</em>" ;
message +="<span id='time_s'>"+ seconds + "</span><em>秒</em>" + " <br />";
note.html(message);
}
});
});
2 jquery.countdown.js
/**
* @name jQuery Countdown Plugin
* @author Martin Angelov
* @version 1.0
* @url http://tutorialzine.com/2011/12/countdown-jquery/
* @license MIT License
*/
(function($){
// Number of seconds in every time division
var days = 24*60*60,
hours = 60*60,
minutes = 60;
// Creating the plugin
$.fn.countdown = function(prop){
var options = $.extend({
callback : function(){},
timestamp : 0
},prop);
var left, d, h, m, s, positions;
// Initialize the plugin
init(this, options);
positions = this.find('.position');
(function tick(){
// Time left
left = Math.floor((options.timestamp - (new Date(ot))) / 1000);
if(left < 0){
left = 0;
}
// Number of days left
d = Math.floor(left / days);
updateDuo(0, 1, d);
left -= d*days;
// Number of hours left
h = Math.floor(left / hours);
updateDuo(2, 3, h);
left -= h*hours;
// Number of minutes left
m = Math.floor(left / minutes);
updateDuo(4, 5, m);
left -= m*minutes;
// Number of seconds left
s = left;
updateDuo(6, 7, s);
// Calling an optional user supplied callback
options.callback(d, h, m, s);
// Scheduling another call of this function in 1s
setTimeout(tick, 1000);
})();
// This function updates two digit positions at once
function updateDuo(minor,major,value){
switchDigit(positions.eq(minor),Math.floor(value/10)%10);
switchDigit(positions.eq(major),value%10);
}
return this;
};
function init(elem, options){
elem.addClass('countdownHolder');
// Creating the markup inside the container
$.each(['Days','Hours','Minutes','Seconds'],function(i){
$('<span class="count'+this+'">').html(
'<span class="position">\
<span class="digit static">0</span>\
</span>\
<span class="position">\
<span class="digit static">0</span>\
</span>'
).appendTo(elem);
if(this!="Seconds"){
elem.append('<span class="countDiv countDiv'+i+'"></span>');
}
});
}
// Creates an animated transition between the two numbers
function switchDigit(position,number){
var digit = position.find('.digit')
if(digit.is(':animated')){
return false;
}
if(position.data('digit') == number){
// We are already showing this number
return false;
}
position.data('digit', number);
var replacement = $('<span>',{
'class':'digit',
css:{
top:'-2.1em',
opacity:0
},
html:number
});
// The .static class is added when the animation
// completes. This makes it run smoother.
digit
.before(replacement)
.removeClass('static')
.animate({top:'2.5em',opacity:0},'fast',function(){
digit.remove();
})
replacement
.delay(100)
.animate({top:0,opacity:1},'fast',function(){
replacement.addClass('static');
});
}
})(jQuery);
- 倒计时 jquery.countdown插件
- 倒计时 jquery countdown
- jquery.countdown.js一个时间倒计时的插件
- jquery.countdown 倒计时插件的学习
- CountDown-倒计时
- jQuery Countdown
- countdown-min.js使用 倒计时
- jquery.countdown定时器
- jquery-countdown插件教程
- jquery-countdown插件
- SharePoint Countdown Timer 倒计时Web部件
- iOS 分类之按钮倒计时UIButton+CountDown
- iOS倒计时UIButton+countDown.h文字闪烁
- 6.1倒计时锁(Countdown Latches)
- countDown
- Countdown
- Mayan Countdown Clock-2012世界末日倒计时时钟
- jquery 倒计时
- odoo 按日期字段 指定按 年,月,日等分组
- opengl es 着色器语言
- 30岁程序员困境:转行or跳槽?如何做才不会被替代?
- EasyDSS流媒体解决方案之点播分享
- Protobuf java版本安装步骤
- 倒计时 jquery countdown
- linux curl定时任务
- js下拉列表级联案例
- 会声会影X9无法正常启动0xc000007b
- Fourier transformation in frequency domain with opencv
- 攻破JAVA NIO技术壁垒
- 让MT7620完美支持32M SPI Flash(W25Q256) — 兼谈设备驱动中的shutdown方法
- 7种方法解决移动端Retina屏幕1px边框问题
- Luogu P1970 [NOIp提高组2013]花匠