vue中使用倒计时

短信验证码60s倒计时

    <template>
    <div>
  <span v-if="sendAuthCode" class="c-right" @click="getCode">获取验证码</span>
  <span v-if="!sendAuthCode" class="c-right">
    <span class="auth_text_blue">{{ auth_time }} </span> 秒之重新发送</span>
    </div>
</template>
    
    <script type="text/ecmascript-6">
export default {
  name: "CountDown",
  data() {
    return {
     sendAuthCode: true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
      auth_time: 0, /*倒计时 计数器*/
    };
  },
  props: {
    countTime: {
      type: Object,
      default: () => {},
    },
  },
  
  methods: {
   getCode() {
      this.sendAuthCode = false;
      this.auth_time = 60;
      var auth_timetimer = setInterval(() => {
        this.auth_time--;
        if (this.auth_time <= 0) {
          this.sendAuthCode = true;
          clearInterval(auth_timetimer);
        }
      }, 1000);
    },

  },
 
};
</script>
    
    <style scoped>
.CountDown {
  color: #fff;
}
</style>

十五分钟倒计时

<template>
  <div>
    <p>{{minute}}:{{second}}</p>
  </div>
</template>

<script type="text/ecmascript-6">

export default {
    data () {
      return {
        minutes: 15,
        seconds: 0
      }
    },
    mounted () {
      this.add()
    },
    methods: {
      num: function (n) {
        return n < 10 ? '0' + n : '' + n
      },
      add() {
        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>

五分钟倒计时 结束之后会再加五分钟倒计时 跳转页面不会重新开始

<template>
  <div>
    <button @click="toPh">点击</button>
    <p>{{minute}}:{{second}}</p>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
    data () {
      return {
        minutes: '',
        seconds: '',
        tfcode: '',
        Num:''
      }
    },
    created () {
      this.TIme()
    },
    methods: {
      TIme (){ 
        var that = this
        this.Num =  localStorage.getItem('Num') 
        if(this.Num){
          let number = new Date()/1000 -that.Num
          if(that.Num != '' && number < 0){
            console.log('我还在五分钟内')
            var minutes = parseInt(number*-1/60)
            var seconds = parseInt(number*-1)-minutes*60
            that.minutes = minutes
            that.seconds = seconds
            this.setTime()
          }else{
            console.log('我超过了五分钟')
            let Num = Number(new Date()/1000)+(60*5)
            localStorage.setItem('Num',Num)
          }
        } else {
          this.setTime()
        }
      },
      setTime() {
        var that = this
        that.getTimer = setInterval(()=>{
          that.seconds-=1;
          if(that.seconds < 0){
            that.minutes-=1;
            that.seconds = 59
          }
          if(that.minutes == -1) {
            let Num = Number(new Date()/1000)+(60*5)
            localStorage.setItem('Num',Num)
            let number = new Date()/1000 - Num
            const minutes = parseInt(number*-1/60)
            const seconds = parseInt(number*-1)-minutes*60
            that.minutes = minutes
            that.seconds = seconds
          }
        },1000)
      },
      toPh() {
        this.$router.push({
          name: 'father'
        })
      },
      num: function (n) {
        return n < 10 ? '0' + n : '' + n
      },
    },
    watch: {
      second: {
        handler (newVal) {
          this.num(newVal)
        }
      },
      minute: {
        handler (newVal) {
          this.num(newVal)
        }
      }
    },
    computed: {
      second() {
        return this.num(this.seconds)
      },
      minute() {
        return this.num(this.minutes)
      }
    },
    beforeDestroy() {
      clearInterval(this.getTimer); //关闭
    },
}
</script>

<style lang="scss" scoped>
</style>