js实现获取验证码倒计时

╰+攻爆jí腚メ 2022-01-29 06:17 388阅读 0赞

框架：vue + vuex  
效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWp1bm5h_size_16_color_FFFFFF_t_70]  
代码实现：

<template>
      <div class="container">
    	
    	<x-header style="background-color:#30A2F4;">城市服务</x-header>
    	
        <div class="common"></div>
    	
        <group>
    	  <x-input title="手机号 "   v-model="phone"></x-input>
    	</group>
    	
    	<group>
          <x-input title="验证码" class="weui-vcode" v-model="authcode">
            <x-button class="btn" @click.native="getCode" :disabled="isdisabled" slot="right" type="primary" mini>{
       {codeText}}</x-button>
          </x-input>
        </group>
    	
        <div class="paydiv">
            <x-button class="btn" @click.native="confirmPay" type="primary">确定</x-button>
        </div>
    	
      </div>
    </template>
    
    <script>
    import { XInput, Group, XButton,XHeader } from 'vux'
    import Tools from '../utils/Tools'
    export default {
      name: 'OrderInfo',
      components: {
        Tools,
        XInput, 
        XButton,
    	XHeader,
        Group
      },
      data () {
        return {
    		phone: '',
    		isdisabled: false,
    		codeText: '获取验证码',
    		authcode: '123456'
        }
      },
      mounted: function (params) {
      },
      methods:{
          confirmPay:function (params) {
            console.log('click confirmPay');
            this.$router.push('/result')
          },
    	  getCode:function (e){
    		console.log("获取验证码");
    		this.setTime();
    	  },
    	  setTime:function (){
    		let time = 60;
    		let i = 0;
    		let that = this;
    		//1.在60秒之内，button上倒计时60秒，并显示
    		//2.向controller请求验证码，并发送到指定的手机号上面
    		let set = setInterval(function() {
    			that.codeText = (--time)+"秒后重发";
    			i++;	
    			//此变量用于标识只调用一次获取验证码的函数
    			if (i==1) {
    				console.log("get code start1 ... ");
    				//使获取验证码按钮不可点击
    				that.isdisabled=true
    				that.getVerificationCode();
    			}
    		}, 1000);
    		
    		//60秒之后需要做的事情
    		setTimeout(function() {
    			//恢复获取验证码按钮可点击
    			that.isdisabled=false
    			that.codeText = "获取验证码";
    			clearInterval(set);//清除计时器
    		}, time * 1000); //60000  
    	  },
    	  getVerificationCode: function(){
    	  	//向服务器获取验证码
    		  console.log("get code start2 ... ");
    	  }
      }
    }
    </script>
    
    
    <style scoped>
    .container{
        width: 100%;
    }
    .common{
        margin-top: 15px;
    }
    .paydiv{
        width: 94%;
        margin-top: 20%;
        padding-left: 3%;
        padding-right: 3%;
    }
    .btn{
    	background-color: #30A2F4;
    }
    .btn:active { 
    	background-color: #30A2F4;
    } 
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWp1bm5h_size_16_color_FFFFFF_t_70]: /images/20220129/ffcbb8d009374294b29b037f1d3eddc7.png