III: Testausgabe#
Für die Berechnung der einzelnen Teile der aktuellen Zeit brauchen wir einen Zeitstempel (Zeilen 69-104. Danach wird für jeden Block geprüft, ob er angezeigt werden soll bzw. inaktiv ist. Es handelt sich dann um eine Liste von Wahrheitswerten, die als Objekt gespeichert werden, die zu Testzwecken ausgegeben werden (Zeilen 60-62).
1<template>
2 <div class="berlinclock">
3 <h1>Berlin-Clock</h1>
4 <div class="content">
5 <div id="background">
6 <img id="second"
7 src="/static/clockimages/second.png" />
8 <img id="hour05"
9 src="/static/clockimages/hour-left.png" />
10 <img id="hour10"
11 src="/static/clockimages/hour-middle.png" />
12 <img id="hour15"
13 src="/static/clockimages/hour-middle.png" />
14 <img id="hour20"
15 src="/static/clockimages/hour-right.png" />
16 <img id="hour01"
17 src="/static/clockimages/hour-left.png" />
18 <img id="hour02"
19 src="/static/clockimages/hour-left.png" />
20 <img id="hour03"
21 src="/static/clockimages/hour-left.png" />
22 <img id="hour04"
23 src="/static/clockimages/hour-left.png" />
24 <img id="minute05"
25 src="/static/clockimages/minute-small-left.png" />
26 <img id="minute10"
27 src="/static/clockimages/minute-small-yellow.png" />
28 <img id="minute15"
29 src="/static/clockimages/minute-small-red.png" />
30 <img id="minute20"
31 src="/static/clockimages/minute-small-yellow.png" />
32 <img id="minute25"
33 src="/static/clockimages/minute-small-yellow.png" />
34 <img id="minute30"
35 src="/static/clockimages/minute-small-red.png" />
36 <img id="minute35"
37 src="/static/clockimages/minute-small-yellow.png" />
38 <img id="minute40"
39 src="/static/clockimages/minute-small-yellow.png" />
40 <img id="minute45"
41 src="/static/clockimages/minute-small-red.png" />
42 <img id="minute50"
43 src="/static/clockimages/minute-small-yellow.png" />
44 <img id="minute55"
45 src="/static/clockimages/minute-small-right.png" />
46 <img id="minute01"
47 src="/static/clockimages/minute-left.png" />
48 <img id="minute02"
49 src="/static/clockimages/minute-middle.png" />
50 <img id="minute03"
51 src="/static/clockimages/minute-middle.png" />
52 <img id="minute04"
53 src="/static/clockimages/minute-right.png" />
54 </div>
55 </div>
56 <p><b>Autor:</b></p>
57 <p>Rüdiger Appel</p>
58 <p><b>Quelle:</b></p>
59 <p>http://www.3quarks.com/de/Mengenlehreuhr/index.html</p>
60 <p>
61 {{ getTimeStamp()}}
62 </p>
63</template>
64
65<script>
66export default {
67 name: 'berlinclock',
68 methods: {
69 getTimeStamp: function () {
70 // check if parts of the time in or out of the
71 // current datetime
72
73 var datum = new Date()
74 var timestamp = {}
75 // Sekunden
76 timestamp.seconds = datum.getSeconds() % 2 > '0'
77 // 5-hour parts
78 timestamp.hour05 = datum.getHours() > '4'
79 timestamp.hour10 = datum.getHours() > '9'
80 timestamp.hour15 = datum.getHours() > '14'
81 timestamp.hour20 = datum.getHours() > '19'
82 // 1-hour parts
83 timestamp.hour01 = datum.getHours() % 5 > '0'
84 timestamp.hour02 = datum.getHours() % 5 > '1'
85 timestamp.hour03 = datum.getHours() % 5 > '2'
86 timestamp.hour04 = datum.getHours() % 5 > '3'
87 // 5-minute parts
88 timestamp.minute05 = datum.getMinutes() > '4'
89 timestamp.minute10 = datum.getMinutes() > '9'
90 timestamp.minute15 = datum.getMinutes() > '14'
91 timestamp.minute20 = datum.getMinutes() > '19'
92 timestamp.minute25 = datum.getMinutes() > '24'
93 timestamp.minute30 = datum.getMinutes() > '29'
94 timestamp.minute35 = datum.getMinutes() > '34'
95 timestamp.minute40 = datum.getMinutes() > '39'
96 timestamp.minute45 = datum.getMinutes() > '44'
97 timestamp.minute50 = datum.getMinutes() > '49'
98 timestamp.minute55 = datum.getMinutes() > '54'
99 // 1-minute parts
100 timestamp.minute01 = datum.getMinutes() % 5 > '0'
101 timestamp.minute02 = datum.getMinutes() % 5 > '1'
102 timestamp.minute03 = datum.getMinutes() % 5 > '2'
103 timestamp.minute04 = datum.getMinutes() % 5 > '3'
104 return timestamp
105 }
106 }
107}
108</script>
109
110<!-- Add "scoped" attribute to limit CSS to this component only -->
111<style scoped>
112#background {
113 width: 190px;
114 height: 265px;
115 margin: auto;
116 position: relative;
117 background: transparent url(/static/clockimages/background.png)
118 no-repeat top right;
119 }
120 #second{
121 position: absolute;
122 left: 70px;
123 top: 10px;
124 width: 50px;
125 height: 50px;
126 visibility:hidden;
127}
128#hour05{
129 position: absolute;
130 left: 10px; top: 78px;
131 width: 38px; height: 27px;
132 visibility:hidden;
133}
134#hour10{
135 position: absolute;
136 left: 54px;
137 top: 78px;
138 width: 38px;
139 height: 27px;
140 visibility:hidden;
141}
142#hour15{
143 position: absolute;
144 left: 98px;
145 top: 78px;
146 width: 38px;
147 height: 27px;
148 visibility:hidden;
149}
150#hour20{
151 position: absolute;
152 left: 142px;
153 top: 78px;
154 width: 38px;
155 height: 27px;
156 visibility:hidden;
157}
158#hour01{
159 position: absolute;
160 left: 10px;
161 top: 127px;
162 width: 38px;
163 height: 27px;
164 visibility:hidden;
165}
166#hour02{
167 position: absolute;
168 left: 54px;
169 top: 127px;
170 width: 38px;
171 height: 27px;
172 visibility:hidden;
173}
174#hour03{
175 position: absolute;
176 left: 98px;
177 top: 127px;
178 width: 38px;
179 height: 27px;
180 visibility:hidden;
181}
182#hour04{
183 position: absolute;
184 left: 142px;
185 top: 127px;
186 width: 38px;
187 height: 27px;
188 visibility:hidden;
189}
190#minute05{
191 position: absolute;
192 left: 10px;
193 top: 176px;
194 width: 10px;
195 height: 27px;
196 visibility:hidden;
197}
198#minute10{
199 position: absolute;
200 left: 26px;
201 top: 176px;
202 width: 10px;
203 height: 27px;
204 visibility:hidden;
205}
206#minute15{
207 position: absolute;
208 left: 42px;
209 top: 176px;
210 width: 10px;
211 height: 27px;
212 visibility:hidden;
213}
214#minute20{
215 position: absolute;
216 left: 58px;
217 top: 176px;
218 width: 10px;
219 height: 27px;
220 visibility:hidden;
221}
222#minute25{
223 position: absolute;
224 left: 74px;
225 top: 176px;
226 width: 10px;
227 height: 27px;
228 visibility:hidden;
229}
230#minute30{
231 position: absolute;
232 left: 90px;
233 top: 176px;
234 width: 10px;
235 height: 27px;
236 visibility:hidden;
237}
238#minute35{
239 position: absolute;
240 left: 106px;
241 top: 176px;
242 width: 10px;
243 height: 27px;
244 visibility:hidden;
245}
246#minute40{
247 position: absolute;
248 left: 122px;
249 top: 176px;
250 width: 10px;
251 height: 27px;
252 visibility:hidden;
253}
254#minute45{
255 position: absolute;
256 left: 138px;
257 top: 176px;
258 width: 10px;
259 height: 27px;
260 visibility:hidden;
261}
262#minute50{
263 position: absolute;
264 left: 154px;
265 top: 176px;
266 width: 10px;
267 height: 27px;
268 visibility:hidden;
269}
270#minute55{
271 position: absolute;
272 left: 170px;
273 top: 176px;
274 width: 10px;
275 height: 27px;
276 visibility:hidden;
277}
278#minute01{
279 position: absolute;
280 left: 10px;
281 top: 225px;
282 width: 38px;
283 height: 27px;
284 visibility:hidden;
285}
286#minute02{
287 position: absolute;
288 left: 54px;
289 top: 225px;
290 width: 38px;
291 height: 27px;
292 visibility:hidden;
293}
294#minute03{
295 position: absolute;
296 left: 98px;
297 top: 225px;
298 width: 38px;
299 height: 27px;
300 visibility:hidden;
301}
302#minute04{
303 position: absolute;
304 left: 142px;
305 top: 225px;
306 width: 38px;
307 height: 27px;
308 visibility:hidden;
309}
310</style>