倒计时 jquery countdown

1.jingjia.jsp中的内容

引入文件

标签

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 +=""+ days + "天" ;
message +=""+ hours + "时" ;
message +=""+ minutes + "分" ;
message +=""+ seconds + "秒" + " ";

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){
$('').html(
'\
0\
\
\
0\
'
).appendTo(elem);

if(this!="Seconds"){
elem.append('');
}
});

}

// 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 = $('',{
'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.js一个时间倒计时的插件
1 http://hilios.github.io/jQuery.countdown/ 到官网上下载插件 2 <div id="getting-started">< ...
jquery.countdown 倒计时插件的学习
1.第一种简单的使用第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...
html5 倒计时插件,基于HTML5 time元素的倒计时jquery插件
这是一款简单的基于HTML5 time元素的倒计时jquery插件.该jquery倒计时插件提供默认的翻牌样式,可以在所有支持HTML5 time元素的浏览器中正常工作. 安装可以通过npm来安装j ...
倒计时(Jquery插件)
/*** 倒计时(Jquery插件)** @author Johnson* @version Tuesday Novermber 22th, 2011* @example * var now = &q ...
6款不容错过的超棒倒计时jQuery插件
日期:2012-11-12 来源:GBin1.com 如果你曾经开发过类似限时抢购的网站或者应用的话,或者你需要在发布一款超棒游戏之前添加一些神秘元素的话,一个超棒或者超酷的倒计时页面绝对是非常有 ...
Vue3毫秒倒计时（Countdown）
可自定义设置以下属性: 倒计时数值(countdown),必传,类型 number,单位ms,支持设置未来某时刻的时间戳或相对剩余时间,默认值 0 倒计时标题(title),类型 string | ...
html读秒倒计时,jQuery实现读秒倒计时
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
（5）日期倒计时计算 countdown
一.实现代码函数封装: /* countdown.js */ /*** 输入一个时间,自动计算与当前时间的时间差,可返回剩余天数.小时数.分钟数.秒数.毫秒数,或全部最佳时间集合.* @param ...
Vue 倒计时（countDown）组件
解析vant-ui的 count-down 源码修改的.导入即可使用.无需任何依赖.api和使用方法同vant-ui官方地址. countdown API: https://vant-contrib. ...

倒计时 jquery countdown

倒计时 jquery countdown相关推荐

最新文章

热门文章