我想为flipclock添加一个年份计数器,但是" days"似乎是开箱即用的最大单位。
如何修改以将年份添加为显示计数器之一?
答案 0 :(得分:3)
对于任何有兴趣的人,我将以下内容添加到flipclock.js:
/**
* Gets number of years
*/
getYears: function() {
return Math.floor(this.time / 60 / 60 / 24 / 7 / 52);
},
而且:
/**
* Gets a digitized yearly counter
*
* @return object Returns a digitized object
*/
getYearCounter: function(includeSeconds) {
var digits = [
this.getYears(),
this.getDays(true),
this.getHours(true),
this.getMinutes(true)
];
if(includeSeconds) {
digits.push(this.getSeconds(true));
}
return this.digitize(digits);
},
而且:
(function($) {
/**
* Yearly Counter Clock Face
*
* This class will generate a yearly counter for FlipClock.js. A
* yearly counter will track years, days, hours, minutes, and seconds. If
* the number of available digits is exceeded in the count, a new
* digit will be created.
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
FlipClock.YearlyCounterFace = FlipClock.Face.extend({
showSeconds: true,
/**
* Constructor
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
constructor: function(factory, options) {
this.base(factory, options);
},
/**
* Build the clock face
*/
build: function(time) {
var t = this;
var children = this.factory.$el.find('ul');
var offset = 0;
time = time ? time : this.factory.time.getYearCounter(this.showSeconds);
if(time.length > children.length) {
$.each(time, function(i, digit) {
t.createList(digit);
});
}
if(this.showSeconds) {
$(this.createDivider('Seconds')).insertBefore(this.lists[this.lists.length - 2].$el);
}
else
{
offset = 2;
}
$(this.createDivider('Minutes')).insertBefore(this.lists[this.lists.length - 4 + offset].$el);
$(this.createDivider('Hours')).insertBefore(this.lists[this.lists.length - 6 + offset].$el);
$(this.createDivider('Days')).insertBefore(this.lists[this.lists.length - 8 + offset].$el);
$(this.createDivider('Years', true)).insertBefore(this.lists[0].$el);
this.base();
},
/**
* Flip the clock face
*/
flip: function(time, doNotAddPlayClass) {
if(!time) {
time = this.factory.time.getYearCounter(this.showSeconds);
}
this.autoIncrement();
this.base(time, doNotAddPlayClass);
}
});
}(jQuery));
然后输出它:
<div class="clock" style="margin:2em;"></div>
<script type="text/javascript">
var clock;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date(currentDate.getFullYear() + 22, 0, 1);
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'YearlyCounter',
countdown: true
});
});
</script>