短信验证码倒计时代码

功能：点击获取验证码，开始倒计时，按钮不能点击，倒计时结束后，恢复原来的样子，可以继续点击。

html代码：

<div class="input-item"><input type="text" name="verifiyCode" placeholder="短信验证码" maxlength="5"><button class="getCode">获取验证码</button>
</div>

css代码：

.getCode {position: absolute;top: .5rem;right: 0;font-size: .34rem;color: #fbb111;background: none;outline: none;border: none;
}
.getCode:disabled {color: #ccc;
}

javascript代码：

$(".getCode").on("click",function(){time(this);
});
//验证码倒计时
var wait = 5;
function time(obj) {if(wait==0) {$(".getCode").removeAttr("disabled");$(".getCode").text("获取验证码");wait = 5;}else {$(".getCode").attr("disabled","true");$(".getCode").text(wait+"秒后重试");wait--;setTimeout(function() { //倒计时方法time(obj);},1000);    //间隔为1s}
}

结果：

短信验证码倒计时代码相关推荐

jquery短信验证码倒计时
jquery短信验证码倒计时 1. 演示点击前: 点击后: 2. 代码 1. HTML代码 <input type="button" value="获取验证码&q ...
利用JS实现短信验证码倒计时案例
本章教程利用JS实现发送短信倒计时案例,这个需求在实际开发过程很常见. 目录一.程序代码二.预览展示一.程序代码 <!DOCTYPE html> <html lang=&quo ...
js开发实例 —— 发送短信验证码倒计时5S钟之后自动跳转页面
十九.发送短信验证码倒计时思路: ① 按钮点击之后,会禁用disabled为true. ② 同时按钮里面的内容会变化,注意button里面的内容通过innerHTML修改. ③ 里面秒数是有变化的, ...
html一键短信代码,javascript发送短信验证码实现代码
本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下: 实现点击"发送验证码"按钮后,按钮依次显示为"59秒后重试". ...
android 获取短信验证码倒计时
android 获取短信验证码倒计时 public class MainActivity extends Activity { private Button submit; privat ...
获取短信验证码倒计时，非常简单
<!doctype html><html lang="en"> <head><meta charset="UTF-8" ...
安卓CountDownTimer实现全民夺宝抢购倒计时和短信验证码倒计时
在sina里看到了什么全民夺宝的链接,然后忍不住1元的诱惑被坑了10多块,什么都没有抽到,但是还是有人抽到了不知道是不是坑爹的,然后也就动手做一下倒计时的功能. 先看全民夺宝: 说起这个功能是不是感觉 ...
thinkphp3.2对接短信验证码平台代码
1.短信验证码平台云之讯短信验证码平台注册账号实名验证,余额充值,获取对接密钥等信息添加短信模板并审核通过 2.发送验证码代码 <?php namespace Home\Controlle ...
java云片模板参数_Java使用云片API发送短信验证码的代码详解
这篇文章主要介绍了Java使用云片API发送短信验证码,主要用的是Java实现短信验证码.需要的朋友可以参考下下面开始介绍的是如何利用机器完成批量操作,将短信业务自动化. 获取APIKEY 云片网提 ...

短信验证码倒计时代码

短信验证码倒计时代码相关推荐

最新文章

热门文章