vue60/30分钟倒计时

最新推荐文章于 2024-08-19 16:42:47 发布

燃烧的小煤球~

最新推荐文章于 2024-08-19 16:42:47 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/qq_41022291/article/details/82021200

版权

废话不多说，收集的，直接粘。

原网址我找不到了。这是我自己用在项目里的，略有改动。效果一样的

以下是代码

<template>
  <div>
    <p style="display: inline">00小时{{minute}}分{{second}}秒</p>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        goodsObj: [
          {
            name: 'HomeMinuteTimer',
            checked: false,
            list: [ ]
          }
        ],
        minutes: 59,   // 此处修改分钟数量
        seconds: 59     // 此处修改秒数数量
      }
    },
    mounted () {
      this.add()
    },
    methods: {
      num: function (n) {
        return n < 10 ? '0' + n : '' + n
      },
      add: function () {
        var _this = this
        var time = window.setInterval(function () {
          if (_this.seconds === 0 && _this.minutes !== 0) {
            _this.seconds = 59
            _this.minutes -= 1
          } else if (_this.minutes === 0 && _this.seconds === 0) {
            _this.seconds = 0
            window.clearInterval(time)
          } else {
            _this.seconds -= 1
          }
        }, 1000)
      }
    },
    watch: {
      second: {
        handler (newVal) {
          this.num(newVal)
        }
      },
      minute: {
        handler (newVal) {
          this.num(newVal)
        }
      }
    },
    computed: {
      second: function () {
        return this.num(this.seconds)
      },
      minute: function () {
        return this.num(this.minutes)
      }
    }
  }
</script>

<style>
</style>