Update Time more smoothly (fade char-wise)

This commit is contained in:
Jonathan Vogt
2016-01-25 23:15:01 +01:00
parent a201ef4e53
commit e1b9bd46b6
3 changed files with 25 additions and 6 deletions

View File

@@ -1,8 +1,8 @@
var time = {
timeFormat: config.time.timeFormat || 24,
dateLocation: '.date',
timeLocation: '.time',
updateInterval: 1000,
timeLocation: '#time',
updateInterval: 10000,
intervalId: null
};
@@ -12,10 +12,25 @@ var time = {
time.updateTime = function () {
var _now = moment(),
_date = _now.format('dddd, LL');
_date = _now.format('[<span class="dayname">]dddd,[</span><span class="longdate">]LL[</span>]');
$(this.dateLocation).html(_date);
$(this.timeLocation).html(_now.format(this._timeFormat+':mm[<span class="sec">]ss[</span>]'));
$(this.dateLocation).updateWithText(_date, 1000);
$('.fade').removeClass('fade')
$('#timebuffer').html(_now.format('HH:mm').replace(/./g, "<span>$&</span>"));
$('#timebuffer').children().each(function( index ) {
var _text = $( this ).text();
var _i = index+1;
var _text2 = $('#time span:nth-child('+_i+')').text();
if (_text != _text2) {
$('#time span:nth-child('+_i+')').addClass('fade');
$(this).addClass('fade');
}
});
$('.fade').fadeTo(400, 0.25, function() {
$('#time').html($('#timebuffer').html());
$('#time').children().fadeTo(400, 1).removeClass('fade');
});
}