73bcce88
 luigser
COMPONENTS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<element name="tick-tock-clock">
<template>
<span id="hh"></span>
<span id="sep">:</span>
<span id="mm"></span>
</template>
<script>
function start() {
this.tick();
this._interval = window.setInterval(this.tick.bind(this), 1000);
}
function stop() {
window.clearInterval(this._interval);
}
function fmt(n) {
return (n < 10 ? '0' : '') + n;
}
({
readyCallback: function () {
this._root = this.createShadowRoot();
this._root.appendChild(this.template.content.cloneNode());
if (this.parentElement) {
start.call(this);
}
},
insertedCallback: start,
removedCallback: stop,
tick: function () {
var now = new Date();
this._root.querySelector('hh').textContent = fmt(now.getHours());
this._root.querySelector('sep').style.visibility =
now.getSeconds() % 2 ? 'visible' : 'hidden';
this._root.querySelector('mm').textContent = fmt(now.getMinutes());
}
});
</script>
</element>
|
