|
<template>
<div class="berlinclock">
<h1>Berlin-Clock</h1>
<div class="content">
<div id="background">
<img id="second" alt="" src="/static/clockimages/second.png" />
<img id="hour05" alt="" src="/static/clockimages/hour-left.png" />
<img id="hour10" alt="" src="/static/clockimages/hour-middle.png" />
<img id="hour15" alt="" src="/static/clockimages/hour-middle.png" />
<img id="hour20" alt="" src="/static/clockimages/hour-right.png" />
<img id="hour01" alt="" src="/static/clockimages/hour-left.png" />
<img id="hour02" alt="" src="/static/clockimages/hour-left.png" />
<img id="hour03" alt="" src="/static/clockimages/hour-left.png" />
<img id="hour04" alt="" src="/static/clockimages/hour-left.png" />
<img id="minute05" alt="" src="/static/clockimages/minute-small-left.png" />
<img id="minute10" alt="" src="/static/clockimages/minute-small-yellow.png" />
<img id="minute15" alt="" src="/static/clockimages/minute-small-red.png" />
<img id="minute20" alt="" src="/static/clockimages/minute-small-yellow.png" />
<img id="minute25" alt="" src="/static/clockimages/minute-small-yellow.png" />
<img id="minute30" alt="" src="/static/clockimages/minute-small-red.png" />
<img id="minute35" alt="" src="/static/clockimages/minute-small-yellow.png" />
<img id="minute40" alt="" src="/static/clockimages/minute-small-yellow.png" />
<img id="minute45" alt="" src="/static/clockimages/minute-small-red.png" />
<img id="minute50" alt="" src="/static/clockimages/minute-small-yellow.png" />
<img id="minute55" alt="" src="/static/clockimages/minute-small-right.png" />
<img id="minute01" alt="" src="/static/clockimages/minute-left.png" />
<img id="minute02" alt="" src="/static/clockimages/minute-middle.png" />
<img id="minute03" alt="" src="/static/clockimages/minute-middle.png" />
<img id="minute04" alt="" src="/static/clockimages/minute-right.png" />
</div>
</div>
<p><b>Autor:</b></p>
<p>Rüdiger Appel</p>
<p><b>Quelle:</b></p>
<p>http://www.3quarks.com/de/Mengenlehreuhr/index.html</p>
<p>
{{ getTimeStamp()}}
</p>
</template>
<script>
export default {
name: 'berlinclock',
methods: {
getTimeStamp: function () {
// check if parts of the time in or out of the
// current datetime
var datum = new Date()
var timestamp = {}
// Sekunden
timestamp.seconds = datum.getSeconds() % 2 > '0'
// 5-hour parts
timestamp.hour05 = datum.getHours() > '4'
timestamp.hour10 = datum.getHours() > '9'
timestamp.hour15 = datum.getHours() > '14'
timestamp.hour20 = datum.getHours() > '19'
// 1-hour parts
timestamp.hour01 = datum.getHours() % 5 > '0'
timestamp.hour02 = datum.getHours() % 5 > '1'
timestamp.hour03 = datum.getHours() % 5 > '2'
timestamp.hour04 = datum.getHours() % 5 > '3'
// 5-minute parts
timestamp.minute05 = datum.getMinutes() > '4'
timestamp.minute10 = datum.getMinutes() > '9'
timestamp.minute15 = datum.getMinutes() > '14'
timestamp.minute20 = datum.getMinutes() > '19'
timestamp.minute25 = datum.getMinutes() > '24'
timestamp.minute30 = datum.getMinutes() > '29'
timestamp.minute35 = datum.getMinutes() > '34'
timestamp.minute40 = datum.getMinutes() > '39'
timestamp.minute45 = datum.getMinutes() > '44'
timestamp.minute50 = datum.getMinutes() > '49'
timestamp.minute55 = datum.getMinutes() > '54'
// 1-minute parts
timestamp.minute01 = datum.getMinutes() % 5 > '0'
timestamp.minute02 = datum.getMinutes() % 5 > '1'
timestamp.minute03 = datum.getMinutes() % 5 > '2'
timestamp.minute04 = datum.getMinutes() % 5 > '3'
return timestamp
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#background {
width: 190px;
height: 265px;
margin: auto;
position: relative;
background: transparent url(/static/clockimages/background.png)
no-repeat top right;
}
#second{
position: absolute;
left: 70px;
top: 10px;
width: 50px;
height: 50px;
visibility:hidden;
}
#hour05{
position: absolute;
left: 10px; top: 78px;
width: 38px; height: 27px;
visibility:hidden;
}
#hour10{
position: absolute;
left: 54px;
top: 78px;
width: 38px;
height: 27px;
visibility:hidden;
}
#hour15{
position: absolute;
left: 98px;
top: 78px;
width: 38px;
height: 27px;
visibility:hidden;
}
#hour20{
position: absolute;
left: 142px;
top: 78px;
width: 38px;
height: 27px;
visibility:hidden;
}
#hour01{
position: absolute;
left: 10px;
top: 127px;
width: 38px;
height: 27px;
visibility:hidden;
}
#hour02{
position: absolute;
left: 54px;
top: 127px;
width: 38px;
height: 27px;
visibility:hidden;
}
#hour03{
position: absolute;
left: 98px;
top: 127px;
width: 38px;
height: 27px;
visibility:hidden;
}
#hour04{
position: absolute;
left: 142px;
top: 127px;
width: 38px;
height: 27px;
visibility:hidden;
}
#minute05{
position: absolute;
left: 10px;
top: 176px;
width: 10px;
height: 27px;
visibility:hidden;
}
#minute10{
position: absolute;
left: 26px;
top: 176px;
width: 10px;
height: 27px;
visibility:hidden;
}
#minute15{
position: absolute;
left: 42px;
top: 176px;
width: 10px;
height: 27px;
visibility:hidden;
}
#minute20{
position: absolute;
left: 58px;
top: 176px;
width: 10px;
height: 27px;
visibility:hidden;
}
#minute25{
position: absolute;
left: 74px;
top: 176px;
width: 10px;
height: 27px;
visibility:hidden;
}
#minute30{
position: absolute;
left: 90px;
top: 176px;
width: 10px;
height: 27px;
visibility:hidden;
}
#minute35{
position: absolute;
left: 106px;
top: 176px;
width: 10px;
height: 27px;
visibility:hidden;
}
#minute40{
position: absolute;
left: 122px;
top: 176px;
width: 10px;
height: 27px;
visibility:hidden;
}
#minute45{
position: absolute;
left: 138px;
top: 176px;
width: 10px;
height: 27px;
visibility:hidden;
}
#minute50{
position: absolute;
left: 154px;
top: 176px;
width: 10px;
height: 27px;
visibility:hidden;
}
#minute55{
position: absolute;
left: 170px;
top: 176px;
width: 10px;
height: 27px;
visibility:hidden;
}
#minute01{
position: absolute;
left: 10px;
top: 225px;
width: 38px;
height: 27px;
visibility:hidden;
}
#minute02{
position: absolute;
left: 54px;
top: 225px;
width: 38px;
height: 27px;
visibility:hidden;
}
#minute03{
position: absolute;
left: 98px;
top: 225px;
width: 38px;
height: 27px;
visibility:hidden;
}
#minute04{
position: absolute;
left: 142px;
top: 225px;
width: 38px;
height: 27px;
visibility:hidden;
}
</style>
|