53 lines
1.2 KiB
JavaScript
53 lines
1.2 KiB
JavaScript
|
/**
|
||
|
|
*
|
||
|
|
* User: Martin Donnelly
|
||
|
|
* Date: 2016-10-03
|
||
|
|
* Time: 14:20
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
var ClockModel = Backbone.Model.extend({
|
||
|
|
initialize: function() {
|
||
|
|
this.set('now',new Date);
|
||
|
|
this.update();
|
||
|
|
},
|
||
|
|
update: function() {
|
||
|
|
var now = new Date;
|
||
|
|
var mod = 60000 - (now.getTime() % 60000);
|
||
|
|
this.set('now',now);
|
||
|
|
|
||
|
|
var clockFn = function() {
|
||
|
|
this.update();
|
||
|
|
};
|
||
|
|
|
||
|
|
setTimeout(clockFn.bind(this), mod + 10);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var Clock = Backbone.View.extend({
|
||
|
|
tagName: 'div',
|
||
|
|
initialize: function() {
|
||
|
|
_.bindAll(this, 'render');
|
||
|
|
this.model.bind('change', this.render);
|
||
|
|
this.$date = $('#date');
|
||
|
|
this.$time = $('#time');
|
||
|
|
this.render();
|
||
|
|
},
|
||
|
|
render: function() {
|
||
|
|
var now = this.model.get('now');
|
||
|
|
//var curTime = now.format('<span class="hour">{24hr}</span>{mm}');
|
||
|
|
var curTime = now.format('<span class="time">{24hr} {mm}</span>');
|
||
|
|
|
||
|
|
var curDate = now.format('{yyyy}-{MM}-{dd}');
|
||
|
|
if (this.prevTime !== curTime) {
|
||
|
|
this.$time.html(curTime);
|
||
|
|
this.prevTime = curTime;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.prevDate !== curDate) {
|
||
|
|
this.$date.html(now.format(
|
||
|
|
'<span class="wd-{do}">{Weekday}</span> <span class="mo mo-{M}">{Month} {dd}</span> {yyyy}'));
|
||
|
|
this.prevDate = curDate;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|