首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >倒计时按钮—获取手机验证码按钮

倒计时按钮—获取手机验证码按钮

作者头像
ProsperLee
发布2018-10-24 10:41:50
2.8K0
发布2018-10-24 10:41:50
举报

HTML:

<input type="button" value="获取验证码">

CSS:

 1 input[type=button] {
 2     width: 150px;
 3     height: 30px;
 4     background-color: #ff3000;
 5     border: 0;
 6     border-radius: 15px;
 7     color: #fff;
 8 }
 9 
10 input[type=button].on {
11     background-color: #eee;
12     color: #ccc;
13     cursor: not-allowed;
14 }

JavaScript:

 1     $("input[type='button']").click(btnCheck);
 2 
 3     /**
 4      * [btnCheck 按钮倒计时常用于获取手机短信验证码]
 5      */
 6     function btnCheck() {
 7 
 8         $(this).addClass("on");
 9 
10         var time = 5;
11 
12         $(this).attr("disabled", true);
13 
14         var timer = setInterval(function() {
15 
16             if (time == 0) {
17 
18                 clearInterval(timer);
19 
20                 $("input").attr("disabled", false);
21 
22                 $("input").val("获取验证码");
23 
24                 $("input").removeClass("on");
25 
26             } else {
27                 
28                 $('input').val(time + "秒");
29                 
30                 time--;
31 
32             }
33 
34         }, 1000);
35 
36     }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-08-07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档