码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-08-07 20:49:24      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:htm   code   disable   font   function   led   asc   att   tin   

技术分享图片

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     }

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

标签:htm   code   disable   font   function   led   asc   att   tin   

原文地址:https://www.cnblogs.com/lprosper/p/9438804.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!