Vue实现倒计时小功能

很多项目中都需要实现倒计时功能，例：发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局，简单操作，简单效果，最主要的是思路和倒计时步骤理解！！！

例、代码如下：

要求：点击提交按钮倒计时五秒，倒计时期间输入框和提交按钮禁用，倒计时结束后输入框和提交按钮再变成正常状态

1、先实现要求的html布局，添加点击事件

<div>
    <!-- disabled为true禁用 -->
    输入框：<input type="text" :disabled="istrue">
    <button @click="addHandle" :disabled="istrue">提交</button>
    <!-- 倒计时文字提示 -->
    <p>{{this.txt}}</p>
</div>

2、点击提交按钮倒计时开始变禁用状态，定义一个计时器

<script>
export default {
  data(){
    return {
      txt:'',
      istrue:false,
      inp:''
    }
  },
  methods:{
    addHandle(){
      //定义n=5秒
      let n=5
      //定义定时器time
      let time=setInterval(()=>{
        //禁用
        this.istrue=true
        //改变倒计时文字提示
        this.txt=n+'秒后提交'
        n--
        //如果n<0，清除定时器，禁用状态取消，文字提示为空（不显示）
        if(n<0){
          this.txt=""
          this.istrue=false
          clearInterval(time)
        }
      },1000)
    }
  }
}
</script>

思路步骤都写在上方注释里了，一个简单的倒计时就这样轻易实现了。

整体代码：

<template>
  <div>
    <!-- disabled为true禁用 -->
    输入框：<input type="text" :disabled="istrue">
    <button @click="addHandle" :disabled="istrue">提交</button>
    <!-- 倒计时文字提示 -->
    <p>{{this.txt}}</p>
  </div>
</template>
<script>
export default {
  data(){
    return {
      txt:'',
      istrue:false,
      inp:''
    }
  },
  methods:{
    addHandle(){
      //定义n=5秒
      let n=5
      //定义定时器time
      let time=setInterval(()=>{
        //禁用
        this.istrue=true
        //改变倒计时文字提示
        this.txt=n+'秒后提交'
        n--
        //如果n<0，清除定时器，禁用状态取消，文字提示为空（不显示）
        if(n<0){
          this.txt=""
          this.istrue=false
          clearInterval(time)
        }
      },1000)
    }
  }
}
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。

您可能感兴趣的文章:

• Vue写一个简单的倒计时按钮功能
• 简单实现vue验证码60秒倒计时功能
• vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
• 基于vue的短信验证码倒计时demo
• vue实现商城秒杀倒计时功能
• vue实现倒计时获取验证码效果
• vue实现验证码按钮倒计时功能
• vue中多个倒计时实现代码实例
• vue设计一个倒计时秒杀的组件详解
• vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

本文由 华域联盟 原创撰写：华域联盟 » Vue实现倒计时小功能

转载请保留出处和原文链接：https://www.cnhackhy.com/81507.htm