Version V: Anzeige aktivieren

Übersicht



Nun muss für jedes Bild entschieden werden, ob es sichtbar sein soll oder eben nicht. Gesteuert wird es über die Wahrheitswerte in der Struktur timestamp. Eine neue Funktion führt nun den Vergleich durch und gibt als Ergebnis die passende CSS-Anweisung zurück. Für jedes Bild wird dann die Funktion aufgerufen. Hier ein Beispiel aus dem Script:

<img id="minute04" alt="" src="/static/clockimages/minute-right.png"
     v-bind:style="isActive('minute04')"/>

Die Funktion isActive befindet sich im Methoden-Block (Zeilen 74-76). Dort verwenden wir den bedingten Operatator (?:) um eine wenn-dann-Entscheidung treffen zu können. Damit die aktuelle Zeit auch wirklich angezeigt wird, brauchen wir noch eine Initialzündung. Das machen wir in der Zeile 61, indem wir die Zeitermittlung einmalig aufrufen.

/files/vue/vue-berlin-clock/berlin-clock5-erste-ausgabe.png

vue/vue-berlin-clock/berlinclock5.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>
 <p>
   {{ getTimeStamp() }}
  </p>
</template>

<script>
export default {
  name: 'berlinclock',
  data () {
    return {
      timestamp: ''
    }
  },
  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>