关灯
开启左侧

jQuery 点击获取验证码按钮及倒计时功能

[复制链接]
小川 发表于 2018-10-11 09:34:41 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 

1.具体思路

        点击获取验证码按钮 —> 调用获取验证码接口(忽略)—>获取验证码按钮切换到不可点击状态,按钮背景色呈灰色,按钮文字呈现为“倒计时秒数+后可重新获取”—> 倒计时60s后按钮恢复可点击状态,按钮背景呈橙色,按钮文字呈现为“重新发送”

2.HTML代码

  1. <button type="button" class="feachBtn">获取验证码</button>
复制代码

3.JS代码

  1. // 点击获取验证码操作
  2.   $('.feachBtn').click(function() {
  3.     let count = 60;
  4.     const countDown = setInterval(() => {
  5.       if (count === 0) {
  6.        $('.feachBtn').text('重新发送').removeAttr('disabled');
  7.        $('.feachBtn').css({
  8.         background: '#ff9400',
  9.         color: '#fff',
  10.        });
  11.        clearInterval(countDown);
  12.       } else {
  13.        $('.feachBtn').attr('disabled', true);
  14.        $('.feachBtn').css({
  15.         background: '#d8d8d8',
  16.         color: '#707070',
  17.        });
  18.        $('.feachBtn').text(count + '秒后可重新获取');
  19.       }
  20.       count--;
  21.      }, 1000);
  22.     }
  23.   });
复制代码

4.效果图


 

精彩评论1

正序浏览
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 最佳新人

    注册账号后积极发帖的会员

1关注

1粉丝

105帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )