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>