Question

我一直在构建一个间隔计时器，尝试在activeTime和restTime之间切换并为指定的interval计数循环时遇到了一些麻烦。

基本上，我希望计时器运行3个间隔，其中活动时间为5秒，休息时间为2秒。

我设法使计时器倒数，但我正在努力找出如何在两次设置间隔时间之间切换。

这是我到目前为止所拥有的：

InvervalTimer.vue

<template lang="">
  <div class="interval-timer">
    <div class="countdown">
      {{ time }}
    </div>
    <div class="countdown-controls">
      <button v-if="!isRunning" @click="startTimer()">start</button>
      <button v-if="isRunning" @click="stopTimer()">Reset</button>
    </div>
    <div class="interval-details">
      <div class="active-period">Active: {{ timer.active.time }}</div>
      <div class="rest-period">Rest: {{ timer.rest.time }}</div>
      <div class="intervals">Intervals: {{ timer.intervals }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'IntervalTimer',

  data: () => ({
    count: 0,
    isRunning: false,
    interval: 0
  }),
  props: ['timer'], // See Timer Object JSON bellow
  computed: {
    active() {
      return this.timer.active
    },
    rest() {
      return this.timer.rest
    },
    // Rest
    restTime() {
      const timeLeft = this.rest.totalSeconds - this.count

      if (this.rest.totalSeconds === this.count) {
        clearInterval(this.interval)
        this.count = 0
      } else {
        const mins = Math.floor(timeLeft / 60)
        const secs = timeLeft % 60
        if (mins > 10) {
          const mins = parseInt('0' + mins)
        }
        return mins + ':' + secs
      }
    },
    // Active
    activeTime() {
      const timeLeft = this.active.totalSeconds - this.count

      if (this.active.totalSeconds === this.count) {
        clearInterval(this.interval)
        this.count = 0
      } else {
        const mins = Math.floor(timeLeft / 60)
        const secs = timeLeft % 60
        if (mins > 10) {
          const mins = parseInt('0' + mins)
        }
        return mins + ':' + secs
      }
    },

    time() {
      const activeTime = this.activeTime
      const restTime = this.restTime
      if (activeTime <= 0) {
        this.stopTimer()
        return restTime
      } else {
        return activeTime
      }
    }
  },
  methods: {
    counting() {
      return this.count++
    },
    startTimer() {
      if (!this.interval) {
        this.isRunning = true
        this.interval = setInterval(this.timeIt, 1000)
      } else {
        this.isRunning = false
        clearInterval(this.interval)
        this.interval = 0
      }
    },
    timeIt() {
      this.count++
    },
    stopTimer() {
      this.isRunning = false
      clearInterval(this.interval)
      this.interval = 0
      this.count = 0
    }
  }
}
</script>

计时器对象已传递给道具

{
  "active": {
    "minutes": 0,
    "seconds": "5",
    "time": "0:5",
    "totalSeconds": 5
  },
  "createdAt": {
    "seconds": 1549034224,
    "nanoseconds": 540000000
  },
  "intervals": "3",
  "rest": {
    "minutes": 0,
    "seconds": "2",
    "time": "0:2",
    "totalSeconds": 2
  }
}

Answer 1

在我看来，您尚未非常清楚地建模问题。您应该具有一个跟踪剩余间隔，此间隔活动秒数和此间隔休息秒数的结构。每个第二，你递减活性，如果它是> 0，否则递减休息，如果它的> 0，否则，如果间隔> 0，递减时间间隔和复位活性和休息。

在指定的间隔内切换两次

1 个答案: