JavaScript手机验证码倒计时

Posted 2022-11-27 嘻嘻的妙妙屋

手机验证码倒计时

样式

点击“发送手机验证码”开启倒计时：

开启倒计时后，再次点击不会发起再次请求：

index.vue

<p class="title">
 <span class="required">*</span>
 <span>手机号验证：</span>
</p>
<el-input v-model="verify" placeholder="输入验证码" style="width: 116px;"></el-input>
<span class="btn_verify" @click="sendCode">timer === 0 ? '发送手机验证码' : `$timers后重新获取`</span>

index.scss

.title 
  height: 32px;
  line-height: 32px;
  width: 130px;
  text-align: right;
  .required 
    color: #F76560;
  

.btn_verify 
  cursor: pointer;
  color: #FFB200;
  margin-left: 8px;
  line-height: 32px

index.js

import  sendVerifyCode  from '@/api/myApi'

export default 
  name: 'applyModal',
  data() 
    return 
      timer: 0,
      verify: null,
      params: 
    
  ,
  mounted() 
    if (this.params.id !== this.$route.query.id) 
      this.params.id = +this.$route.query.id
    
  ,
  watch: 
    $route () 
      if (this.params.id !== this.$route.query.id) 
        this.params.id = +this.$route.query.id
      
    
  ,
  methods: 
    sendCode () 
      // 开启倒计时效果
      if (this.timer === 0) 
        this.timer = 60
        setInterval(() => 
          if(this.timer <= 0) 
            return
           else 
            // 单次定时任务执行的回调
            this.timer--
          
        ,
        1000,
        
          // 默认不开启定时任务
          immediate: false
        )
       else 
        return
      
      let query = 
      query.id = +this.params.id
      // 发送请求
      sendVerifyCode(JSON.stringify(query)).then((res) => 
        if (res.data.status === 0) 
          this.$message.success(res.data.msg || '手机验证码已发送，请注意查收!')
         else 
          this.$message.error('手机验证码发送失败!')
        
      )