_layui 前端短信验证码倒计时">
赞
踩
一、上代码:
- <div class="layui-form-item">
- <!--<label class="layui-form-label">输入框</label>-->
- <label class="layui-icon layui-icon-vercode layui-form-label formslabel" ></label>
- <!--<div class="layui-input-block formsinput">-->
- <input type="text" name="mailcaptcha" required lay-verify="required" placeholder="邮箱验证码" autocomplete="off" class="layui-input formsinput " style="float: left;width: 54%;margin-right: 14px;">
- <!--</div>-->
- <div class="layui-col-xs5"> <div style="margin-left: 10px;"> <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" onclick="mail()" name="btnSendCode" id="btnSendCode">获取验证码</button> </div> </div>
- </div>
二、js代码
- <script>
-
- var $ = layui.jquery,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
- var form = layui.form;
-
-
- var InterValObj; //timer变量,控制时间
- var count = 3; //间隔函数,1秒执行
- var curCount;//当前剩余秒数
- //发送验证码
- function mail(){
- curCount = count;
- var email = $('#email').val();
- layer.msg('请稍后');
- document.getElementById("btnSendCode").setAttribute("disabled","true" );//设置按钮为禁用状态
- $('#btnSendCode').addClass('layui-btn-disabled');
- $('#btnSendCode').text(curCount + "秒后重获");
- InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数,1秒执行一次
- $.ajax({
- url:"",
- data:{},
- type:"Post",
- dataType:"json",
- success:function(data){
-
-
- },
- error:function(data){
- $.messager.alert('错误',data.msg);
- }
- });
-
- }
-
- //timer处理函数
- function SetRemainTime(){
- if(curCount == 0){
- $('#btnSendCode').removeClass('layui-btn-disabled');
- $('#btnSendCode').text("重获验证码");
- window.clearInterval(InterValObj);// 停止计时器
- document.getElementById("btnSendCode").removeAttribute("disabled");//移除禁用状态改为可用
- } else{
- curCount--;
- $('#btnSendCode').text(curCount + "秒后重获");
- }
- }
-
-
-
- </script>
三、记得点个赞再走哦
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。