VI: Und sie läuft …#
Die Uhr soll nach dem Aufruf der Seite nicht nur den aktuellen Zeitstempel abrufen, sondern auch weiter laufen, wie sich das für eine Uhr gehört. Dazu braucht es eine Endlosschleife, die in JavaScript mit der Funktion setInterval leicht zu realisieren ist. Leider funktioniert das mit Vue nicht und eine Alternative muss her. Diese ist in deb Zeilen 70-76 zu sehen. Damit das auch auch gleich nach dem Ladevorgang startet, verwenden wir dafür den speziellen Block created.
Damit ist die Uhr voll funktionstüchtig und einsatzbereit.
Viel Spaß beim ablesen der Zeit.
1<template>
2 <div class="berlinclock">
3 <h1>Berlin-Clock</h1>
4 <div class="content">
5 <div id="background">
6 <img id="second" alt="" src="/clockimages/second.png"
7 v-bind:style="isActive('seconds')" />
8 <img id="hour05" alt="" src="/clockimages/hour-left.png"
9 v-bind:style="isActive('hour05')"/>
10 <img id="hour10" alt="" src="/clockimages/hour-middle.png"
11 v-bind:style="isActive('hour10')"/>
12 <img id="hour15" alt="" src="/clockimages/hour-middle.png"
13 v-bind:style="isActive('hour15')"/>
14 <img id="hour20" alt="" src="/clockimages/hour-right.png"
15 v-bind:style="isActive('hour20')"/>
16 <img id="hour01" alt="" src="/clockimages/hour-left.png"
17 v-bind:style="isActive('hour01')"/>
18 <img id="hour02" alt="" src="/clockimages/hour-left.png"
19 v-bind:style="isActive('hour02')"/>
20 <img id="hour03" alt="" src="/clockimages/hour-left.png"
21 v-bind:style="isActive('hour03')"/>
22 <img id="hour04" alt="" src="/clockimages/hour-left.png"
23 v-bind:style="isActive('hour04')"/>
24 <img id="minute05" alt="" src="/clockimages/minute-small-left.png"
25 v-bind:style="isActive('minute05')"/>
26 <img id="minute10" alt="" src="/clockimages/minute-small-yellow.png"
27 v-bind:style="isActive('minute10')"/>
28 <img id="minute15" alt="" src="/clockimages/minute-small-red.png"
29 v-bind:style="isActive('minute15')"/>
30 <img id="minute20" alt="" src="/clockimages/minute-small-yellow.png"
31 v-bind:style="isActive('minute20')"/>
32 <img id="minute25" alt="" src="/clockimages/minute-small-yellow.png"
33 v-bind:style="isActive('minute25')"/>
34 <img id="minute30" alt="" src="/clockimages/minute-small-red.png"
35 v-bind:style="isActive('minute30')"/>
36 <img id="minute35" alt="" src="/clockimages/minute-small-yellow.png"
37 v-bind:style="isActive('minute35')"/>
38 <img id="minute40" alt="" src="/clockimages/minute-small-yellow.png"
39 v-bind:style="isActive('minute40')"/>
40 <img id="minute45" alt="" src="/clockimages/minute-small-red.png"
41 v-bind:style="isActive('minute45')"/>
42 <img id="minute50" alt="" src="/clockimages/minute-small-yellow.png"
43 v-bind:style="isActive('minute50')"/>
44 <img id="minute55" alt="" src="/clockimages/minute-small-right.png"
45 v-bind:style="isActive('minute55')"/>
46 <img id="minute01" alt="" src="/clockimages/minute-left.png"
47 v-bind:style="isActive('minute01')"/>
48 <img id="minute02" alt="" src="/clockimages/minute-middle.png"
49 v-bind:style="isActive('minute02')"/>
50 <img id="minute03" alt="" src="/clockimages/minute-middle.png"
51 v-bind:style="isActive('minute03')"/>
52 <img id="minute04" alt="" src="/clockimages/minute-right.png"
53 v-bind:style="isActive('minute04')"/>
54 </div>
55 </div>
56 <p><b>Autor: </b> Rüdiger Appel</p>
57 <p><b>Quelle:</b>
58 <a href="http://www.3quarks.com/de/Mengenlehreuhr/index.html">
59 Mengenlehrenuhr</a>
60 </p>
61 </div>
62</template>
63<script>
64export default {
65 name: 'berlinclock',
66 data() {
67 return {
68 timestamp: ''
69 }
70 },
71 created: function () {
72 let self = this
73 setTimeout(function cycle () {
74 self.getTimeStamp()
75 setTimeout(cycle, 500)
76 }, 500)
77 },
78 methods: {
79 isActive: function (part) {
80 return this.timestamp[part] ? 'visibility:visible' : 'visibility:hidden'
81 },
82 getTimeStamp: function () {
83 // check if parts of the time in or out of the
84 // current datetime
85
86 var datum = new Date()
87 var timestamp = {}
88 // Sekunden
89 timestamp.seconds = datum.getSeconds() % 2 > '0'
90 // 5-hour parts
91 timestamp.hour05 = datum.getHours() > '4'
92 timestamp.hour10 = datum.getHours() > '9'
93 timestamp.hour15 = datum.getHours() > '14'
94 timestamp.hour20 = datum.getHours() > '19'
95 // 1-hour parts
96 timestamp.hour01 = datum.getHours() % 5 > '0'
97 timestamp.hour02 = datum.getHours() % 5 > '1'
98 timestamp.hour03 = datum.getHours() % 5 > '2'
99 timestamp.hour04 = datum.getHours() % 5 > '3'
100 // 5-minute parts
101 timestamp.minute05 = datum.getMinutes() > '4'
102 timestamp.minute10 = datum.getMinutes() > '9'
103 timestamp.minute15 = datum.getMinutes() > '14'
104 timestamp.minute20 = datum.getMinutes() > '19'
105 timestamp.minute25 = datum.getMinutes() > '24'
106 timestamp.minute30 = datum.getMinutes() > '29'
107 timestamp.minute35 = datum.getMinutes() > '34'
108 timestamp.minute40 = datum.getMinutes() > '39'
109 timestamp.minute45 = datum.getMinutes() > '44'
110 timestamp.minute50 = datum.getMinutes() > '49'
111 timestamp.minute55 = datum.getMinutes() > '54'
112 // 1-minute parts
113 timestamp.minute01 = datum.getMinutes() % 5 > '0'
114 timestamp.minute02 = datum.getMinutes() % 5 > '1'
115 timestamp.minute03 = datum.getMinutes() % 5 > '2'
116 timestamp.minute04 = datum.getMinutes() % 5 > '3'
117 this.timestamp = timestamp
118 }
119 }
120}
121
122</script>
123
124<!-- Add "scoped" attribute to limit CSS to this component only -->
125<style scoped>
126
127h3 {padding-top:20px}
128#background {
129 width: 190px;
130 height: 265px;
131 margin: auto;
132 position: relative;
133 background: transparent url(/clockimages/background.png)
134 no-repeat top right;
135 }
136 #second{
137 position: absolute;
138 left: 70px;
139 top: 10px;
140 width: 50px;
141 height: 50px;
142 visibility:hidden;
143}
144#hour05{
145 position: absolute;
146 left: 10px; top: 78px;
147 width: 38px; height: 27px;
148 visibility:hidden;
149}
150#hour10{
151 position: absolute;
152 left: 54px;
153 top: 78px;
154 width: 38px;
155 height: 27px;
156 visibility:hidden;
157}
158#hour15{
159 position: absolute;
160 left: 98px;
161 top: 78px;
162 width: 38px;
163 height: 27px;
164 visibility:hidden;
165}
166#hour20{
167 position: absolute;
168 left: 142px;
169 top: 78px;
170 width: 38px;
171 height: 27px;
172 visibility:hidden;
173}
174#hour01{
175 position: absolute;
176 left: 10px;
177 top: 127px;
178 width: 38px;
179 height: 27px;
180 visibility:hidden;
181}
182#hour02{
183 position: absolute;
184 left: 54px;
185 top: 127px;
186 width: 38px;
187 height: 27px;
188 visibility:hidden;
189}
190#hour03{
191 position: absolute;
192 left: 98px;
193 top: 127px;
194 width: 38px;
195 height: 27px;
196 visibility:hidden;
197}
198#hour04{
199 position: absolute;
200 left: 142px;
201 top: 127px;
202 width: 38px;
203 height: 27px;
204 visibility:hidden;
205}
206#minute05{
207 position: absolute;
208 left: 10px;
209 top: 176px;
210 width: 10px;
211 height: 27px;
212 visibility:hidden;
213}
214#minute10{
215 position: absolute;
216 left: 26px;
217 top: 176px;
218 width: 10px;
219 height: 27px;
220 visibility:hidden;
221}
222#minute15{
223 position: absolute;
224 left: 42px;
225 top: 176px;
226 width: 10px;
227 height: 27px;
228 visibility:hidden;
229}
230#minute20{
231 position: absolute;
232 left: 58px;
233 top: 176px;
234 width: 10px;
235 height: 27px;
236 visibility:hidden;
237}
238#minute25{
239 position: absolute;
240 left: 74px;
241 top: 176px;
242 width: 10px;
243 height: 27px;
244 visibility:hidden;
245}
246#minute30{
247 position: absolute;
248 left: 90px;
249 top: 176px;
250 width: 10px;
251 height: 27px;
252 visibility:hidden;
253}
254#minute35{
255 position: absolute;
256 left: 106px;
257 top: 176px;
258 width: 10px;
259 height: 27px;
260 visibility:hidden;
261}
262#minute40{
263 position: absolute;
264 left: 122px;
265 top: 176px;
266 width: 10px;
267 height: 27px;
268 visibility:hidden;
269}
270#minute45{
271 position: absolute;
272 left: 138px;
273 top: 176px;
274 width: 10px;
275 height: 27px;
276 visibility:hidden;
277}
278#minute50{
279 position: absolute;
280 left: 154px;
281 top: 176px;
282 width: 10px;
283 height: 27px;
284 visibility:hidden;
285}
286#minute55{
287 position: absolute;
288 left: 170px;
289 top: 176px;
290 width: 10px;
291 height: 27px;
292 visibility:hidden;
293}
294#minute01{
295 position: absolute;
296 left: 10px;
297 top: 225px;
298 width: 38px;
299 height: 27px;
300 visibility:hidden;
301}
302#minute02{
303 position: absolute;
304 left: 54px;
305 top: 225px;
306 width: 38px;
307 height: 27px;
308 visibility:hidden;
309}
310#minute03{
311 position: absolute;
312 left: 98px;
313 top: 225px;
314 width: 38px;
315 height: 27px;
316 visibility:hidden;
317}
318#minute04{
319 position: absolute;
320 left: 142px;
321 top: 225px;
322 width: 38px;
323 height: 27px;
324 visibility:hidden;
325}
326</style>