js获取手机验证码倒计时的实现
方案一
<div class="div user-input">
<input type="number" class="code" name="verify" placeholder="请输入手机验证码" required maxlength="6">
<input type="button" class="obtain generate_code" value=" 获取验证码">
</div>
<script type="text/javascript">
$(function(){
$(".generate_code").click(function(){
var disabled = $(".generate_code").attr("disabled");
if(disabled){
return false;
}
if($("#mobile").val() == "" || isNaN($("#mobile").val()) || $("#mobile").val().length != 11 ){
alert("请填写正确的手机号!");
return false;
}
$.ajax({
async:false,
type: "GET",
url: "{:U('User/sms')}",
data: {mobile:$("#mobile").val()},
dataType: "json",
async:false,
success:function(data){
console.log(data);
settime();
},
error:function(err){
console.log(err);
}
});
});
var countdown=60;
var _generate_code = $(".generate_code");
function settime() {
if (countdown == 0) {
_generate_code.attr("disabled",false);
_generate_code.val("获取验证码");
countdown = 60;
return false;
} else {
$(".generate_code").attr("disabled", true);
_generate_code.val("重新发送(" + countdown + ")");
countdown--;
}
setTimeout(function() {
settime();
},1000);
}
}) </script>
方案二
<div class="div user-input">
<input type="number" class="code" placeholder="请输入手机验证码" required maxlength="6">
<input type="button" class="obtain generate_code" value=" 获取验证码" onclick="settime(this);">
</div>
<script type="text/javascript"> //倒计时
var countdown=60;
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
val.value="获取验证码";
countdown = 60;
return false;
} else {
val.setAttribute("disabled", true);
val.value="重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(val);
},1000);
}
</script>
原文地址http://blog.csdn.net/hj7jay/article/details/51433828
js获取手机验证码倒计时的实现的更多相关文章
- 原生 JS 实现手机验证码倒计时
可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...
- jquery实现获取手机验证码倒计时效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 微信小程序获取手机验证码
一种比较常见的功能获取手机验证码 先看效果图: 其实这个功能实现起来很简单,主要就是调取第三方接口,拿到返回值验证的问题 直接上代码吧: wxml页面: <view class='changeI ...
- vue 项目,获取手机验证码和图形验证码(iviewUI框架)
1.编辑获取验证码模块 <Form ref="phoneFormItem" :model="phoneFormItem" :label-width=&qu ...
- C#获取手机验证码+榛子云平台
今天给大家推荐一个简单的获取手机验证码注册+获取随机4位数 测试框架:.net4.7以上 1.榛子云注册:http://smsow.zhenzikj.com/,送一条测试短信,最低充10元即刻使用 2 ...
- 前端通过js获取手机型号
###前段通过js获取手机型号 需求: 用户登录后记录当前的手机型号并记录 插件: mobile-detect.js插件地址 mobile-device-js插件地址 使用步骤: 获取UA信息-> ...
- JS获取手机型号和系统
废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...
- Android Studio使用Mob来获取手机验证码加上倒计时
再根据上编的基础上再添加倒计时即可 添加一个类TimeCountUtil package zhu.com.yzm4; import android.os.CountDownTimer; import ...
- js&jq 发送验证码倒计时
<input type="text" name='' id="btn"> //发送验证码倒计时var wait=30; function t ...
随机推荐
- Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
- JQuery使用deferreds串行多个ajax请求
使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ...
- 国外远控软件DarkComet-RAT
下载地址:[点此下载] 使用步骤: 注册noip.org账号创建主机地址. 安装并配置DUC. 配置监听端口 配置NO-IP Updater 然后点击Update ,配置成功则会提示Success. ...
- UIViewControllerTransitioningDelegate, UIViewControllerAnimatedTransitioning
#import "ModelAnimationDelegate.h" #import <UIKit/UIKit.h> #import "MapVC.h&quo ...
- android的消息提示(震动与提示音)
protected AudioManager audioManager; protected Vibrator vibrator; audioManager = (AudioManager)getSy ...
- 前端开发--评论区抓bug
1. 工程地址:https://github.com/digitalClass/web_page 网站发布地址: http://115.28.30.25:8029/ ppt展示页面: http://1 ...
- 参加微软Ignite大会有感
很有幸作为MVP参加了本次微软中国的年度技术大会(Ignite).跳出技术领域,这次会议给我最大的感受是态度.这几年不论是开源现有技术,还是黑科技的发布,都给人感觉微软在逐渐变得cool,但是cool ...
- Centos6.5安装mysql不能启动,应该安装mysql-server
centos中安装mysql很简单如下命令即可 yum install mysql 装好了, 运行mysql ERROR 2002 (HY000): Can't connect to local My ...
- Programming Contest Problem Types
Programming Contest Problem Types Hal Burch conducted an analysis over spring break of 1999 and ...
- list<T> 的使用方法。
首先讲一个经常用到的Contains( )方法,用来测试一个元素是否在List内.这个功能跟SQL里面的" like % %"类似. 这个方法在数组中也存在,因为集合其实就是动态数 ...