<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="ez-led" id="clock">00:00:00</div>
<script type="text/javascript">
var Observabel = function(generator) {
this._generator = generator;
}
Observabel.prototype.subscribe = function(Observer) {
console.log('Observer=> ', Observer)
this._generator.call(this, Observer);
}
var Observer = function(consumer) {
this._consumer = consumer;
}
Observer.prototype.onNotify = function(data) {
this._consumer.call(this, data)
}
window.onload = function() {
var elClock = document.getElementById('clock');
var getTime = function() {
var _ = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'],
d = new Date(),
h = d.getHours(),
m = d.getMinutes(),
s = d.getSeconds();
return [_[h] || h, _[m] || m, _[s] || s].join(":");
}
var uiRefresh = new Observer(function(data) {
elClock.textContent = data
})
console.log('uiRefresh=> ', uiRefresh)
var tickStream = new Observabel(function(observer) {
setInterval(function() {
observer.onNotify(getTime())
}, 1000)
}).subscribe(uiRefresh);
}
</script>
</body>
</html>