Version VI: Und sie läuft und läuft...

Übersicht



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.

vue/vue-berlin-clock/berlinclock6.vue (Source)

<template>
  <div class="berlinclock">
  <h1>Berlin-Clock</h1>
  <div class="content">
    <div id="background">
      <img id="second" alt="" src="/static/clockimages/second.png"
           v-bind:style="isActive('seconds')" />
      <img id="hour05" alt="" src="/static/clockimages/hour-left.png"
           v-bind:style="isActive('hour05')"/>
      <img id="hour10" alt="" src="/static/clockimages/hour-middle.png"
           v-bind:style="isActive('hour10')"/>
      <img id="hour15" alt="" src="/static/clockimages/hour-middle.png"
           v-bind:style="isActive('hour15')"/>
      <img id="hour20" alt="" src="/static/clockimages/hour-right.png"
           v-bind:style="isActive('hour20')"/>
      <img id="hour01" alt="" src="/static/clockimages/hour-left.png"
           v-bind:style="isActive('hour01')"/>
      <img id="hour02" alt="" src="/static/clockimages/hour-left.png"
           v-bind:style="isActive('hour02')"/>
      <img id="hour03" alt="" src="/static/clockimages/hour-left.png"
           v-bind:style="isActive('hour03')"/>
      <img id="hour04" alt="" src="/static/clockimages/hour-left.png"
           v-bind:style="isActive('hour04')"/>
      <img id="minute05" alt="" src="/static/clockimages/minute-small-left.png"
           v-bind:style="isActive('minute05')"/>
      <img id="minute10" alt="" src="/static/clockimages/minute-small-yellow.png"
           v-bind:style="isActive('minute10')"/>
      <img id="minute15" alt="" src="/static/clockimages/minute-small-red.png"
           v-bind:style="isActive('minute15')"/>
      <img id="minute20" alt="" src="/static/clockimages/minute-small-yellow.png"
           v-bind:style="isActive('minute20')"/>
      <img id="minute25" alt="" src="/static/clockimages/minute-small-yellow.png"
           v-bind:style="isActive('minute25')"/>
      <img id="minute30" alt="" src="/static/clockimages/minute-small-red.png"
           v-bind:style="isActive('minute30')"/>
      <img id="minute35" alt="" src="/static/clockimages/minute-small-yellow.png"
           v-bind:style="isActive('minute35')"/>
      <img id="minute40" alt="" src="/static/clockimages/minute-small-yellow.png"
           v-bind:style="isActive('minute40')"/>
      <img id="minute45" alt="" src="/static/clockimages/minute-small-red.png"
           v-bind:style="isActive('minute45')"/>
      <img id="minute50" alt="" src="/static/clockimages/minute-small-yellow.png"
           v-bind:style="isActive('minute50')"/>
      <img id="minute55" alt="" src="/static/clockimages/minute-small-right.png"
           v-bind:style="isActive('minute55')"/>
      <img id="minute01" alt="" src="/static/clockimages/minute-left.png"
           v-bind:style="isActive('minute01')"/>
      <img id="minute02" alt="" src="/static/clockimages/minute-middle.png"
           v-bind:style="isActive('minute02')"/>
      <img id="minute03" alt="" src="/static/clockimages/minute-middle.png"
           v-bind:style="isActive('minute03')"/>
      <img id="minute04" alt="" src="/static/clockimages/minute-right.png"
           v-bind:style="isActive('minute04')"/>
    </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>
</template>

<script>
export default {
  name: 'berlinclock',
  data () {
    return {
      timestamp: ''
    }
  },
  created: function () {
    var self = this
    setTimeout(function cycle () {
      self.getTimeStamp()
      setTimeout(cycle, 500)
    }, 500)
  },
  methods: {
    isActive: function (part) {
      return this.timestamp[part] ? 'visibility:visible' : 'visibility:hidden'
    },
    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'
      this.timestamp = 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>