Version IV: Zeitstempel speichern

Übersicht



Wenn die Testausgabe funktioniert, müssen die einzelnen Werte ausgewertet werden. Zu diesem Zweck speichern wir diese ab, um danach Vergleiche anstellen zu können.

Die Abarbeitung muss dann ein wenig umgestellt werden:

  • Daten ablegen in zeitstempel (Zeilen 44-48)
  • return durch Zuweisung ersetzten (Zeile 85)
  • Testausgabe nicht mehr durch Funktionsaufruf, sondern die Ausgabe des Variableninhaltes aus dem Data-Block (Zeile 37).
/files/vue/vue-berlin-clock/berlin-clock3-testausgabe.png

vue/vue-berlin-clock/berlinclock4.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" />
      <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>
   {{ timestamp }}
  </p>
</template>

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