【转】用JS完成手机短信验证按键点击事件
原地址：https://gitee.com/RainVanilla/codes/i7jske4wdogvnb0apmfx571
试了一下，效果还可以，留着备用！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手机接收验证码按钮</title>
<script type="text/javascript" src="static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
//替换btn的值
$("#btn").click(function(){
this.value="60秒后重新发送";
//开启定时器
id = setInterval(showTime,1000);
flag = false;
});
}) var time = 60;
var flag = true;
var id;
function showTime(){
if(time > 0 ){
time--;
$("#btn").val(time+"秒后重新发送");
}else {
$("#btn").val("重新获取验证码");
flag = true;
time=60;
clearInterval(id);
}
}
</script> </head>
<body>
<div>
<input type="text" />
<input id="btn" type="button" value="点击发送验证码" />
</div>
</body>
</html>
上面是原代码，但是如果亲自试一下就会发现有些小问题，就是重复点击按钮的时候会出现bug，在此基础上应该加一个判断，也就是只有跑完60s之后再允许点击事件生效，60s之内不允许调用显示时间的函数，修改代码部分如下：
$(function(){
//替换btn的值
$("#btn").click(function(){
if(time==60){
this.value="60秒后重新发送";
//开启定时器
id = setInterval(showTime,1000);
flag = false;
}
});
})
就是加了一个简单的条件判断，加上之后问题就解决了。
如有不妥请联系我删掉，谢谢。
【转】用JS完成手机短信验证按键点击事件的更多相关文章
- 如何实现php手机短信验证功能
http://www.qdexun.cn/jsp/news/shownews.do?method=GetqtnewsdetailAction&id=1677 下载php源代码 现在网站在建设网 ...
- ASP.NET MVC 手机短信验证
本文来自于stoneniqiu的文章,原文地址 http://www.cnblogs.com/stoneniqiu/p/6234002.html 1.注册一个应用 得到AppKey 和 App Sec ...
- 完整的Android手机短信验证源码
短信验证功能我分两个模块来说,短信验证码的后台和代码实现短信验证码的功能. 一.短信验证码的后台 1.注册Mob账号:http://www.mob.com/#/login 2.注册成功之后, ...
- 利用twilio进行手机短信验证
首先要注册 twilio 账号但是由于twilio人机验证用的是Goole所有注册需要FQ 完成后去免费获取15元使用 然后 pip install twilio 注册完成后会在个人首页显示你的免费金 ...
- 第一次发博，发个简单的Java程序发送手机短信验证
最近在准备一个项目,想的登录时候用手机验证,就通过上网查阅了一下手机验证的实现方法,原来超级简单,下面将一步一步介绍. 1.去中国网建注册一个账号密码,首次注册送五条免费短信和3条免费彩信.具体的网址 ...
- NodeJS 实现手机短信验证 模块阿里大于
1,NodeJS 安装阿里大于模块 切换到项目目录使用npm 安装阿里于模块 npm i node-alidayu --save 2,aliyu官网使用淘宝账户登录 登录阿里大于 https://do ...
- js手机短信验证
贴代码之前,我们先讲一下这里我们用到的技术主要有1个.setInterval(),这个方法可以实现倒计时的效果. css: .weui_btn_disabled.weui_btn_default { ...
- 融云发送手机短信验证短信（.net版本）
首先本次需求是在MVC5中进行的,通过收费的融云服务来验证手机号码,而且本次的项目也是前后台分离,所以添加了WEBAPI2,那么先添加WEBAPI的接口 using System; using Sys ...
- ASP.NET MVC+Bootstrap 实现短信验证
短信验证大家都已经非常熟悉了,基本上每天都在接触手机短信的验证码,比方某宝,某东购物.站点注冊,网上银行等等,都要验证我们的手机号码真实性.这样做有什么优点呢. 曾经咱们在做站点的时候.为了提高用户注 ...
随机推荐
- 用Lingo求解线性规划问题
第一步:输入目标条件和约束条件.每行以分号隔开.然后点击工具栏上的Solve按钮,或Lingo菜单下的Solve子菜单. 第二步:检查report中的结果. 默认情况下,Lingo不进行灵敏度分析. ...
- python的强制转换（当出现 not supported between instances of 'str' and 'int' 的错误时）
当我们编程时,有时会出现如下错误:TypeError: '>' not supported between instances of 'str' and 'int' 如下图: 这是因为input ...
- Android Library项目发布到JCenter最简单的配置方法
前沿 网上的步骤看起来实在太麻烦,gituhb上偶然间看到的一个项目,经过实际验证确实可行.github连接:https://github.com/xiaopansky/android-library ...
- Android 中的冷启动和热启动
App的Activity退出之后,应用的进程并不会被杀死,而是保留在那里.当再次打开App的Activity时,会从已有的进程中创建Activity,是为“热启动”.若打开Activity时没有进程, ...
- JDK自带工具介绍
JDK工具一览表 工具名称 功能描述 appletviewer.exe 用于运行并浏览applet小程序. apt.exe 注解处理工具(Annotation Processing Tool),主要用 ...
- numpy.pad
np.pad()常用与深度学习中的数据预处理,可以将numpy数组按指定的方法填充成指定的形状. np.pad() 对一维数组的填充 import numpy as np arr1D = np.arr ...
- ssh和ssh-copy-id以及批量多机无密码登陆详解
本文主要围绕着ssh服务以及如何通过ssh-copy-id实现无密码登陆. 1. sshd 服务以及配置 2.ssh-copy-id命令的使用以及原理.3.批量多机互相信任. 1. sshd 服务 ...
- python 笔记-转
python笔记 Python 学习笔记 - 14.技巧(Tips) Python 学习笔记 - 13.异常(Exception) Python 学习笔记 - 12.流程控制(Contro ...
- JS原型与原型链终极讲解
function Person () { this.name = 'John'; } var person = new Person(); Person.prototype.say = functio ...
- 撩课-Web大前端每天5道面试题-Day21
1.对async.await的理解,内部原理? ①async---声明一个异步函数: 自动将常规函数转换成promise,返回值也是一个promise对象, 只有async函数内部的异步操作执行完,才 ...