【转】用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 实现短信验证
短信验证大家都已经非常熟悉了,基本上每天都在接触手机短信的验证码,比方某宝,某东购物.站点注冊,网上银行等等,都要验证我们的手机号码真实性.这样做有什么优点呢. 曾经咱们在做站点的时候.为了提高用户注 ...
随机推荐
- Java枚举源码分析
1.是一个范型类, 实现了Serializable和Comparable接口 2.只有两个成员变量:name.ordinal 3.枚举类隐含一个values函数,需通过反射调用才可获取枚举实例化对象列 ...
- zabbix 自定义 key （转）
转自:http://www.cnblogs.com/miclesvic/p/6164303.html 1.在zabbix_agent端zabbix_agentd.conf配置文件中增加自定义Key(/ ...
- activity和Task 有关的 Intent启动方式结合intent.setFlags()
通过设置Intent对象的标记,来改变当前任务堆栈中既存的Activity的顺序: FLAG_ACTIVITY_NEW_TASK----简而言之,跳转到的activity根据情况,可能压在一个新建 ...
- 【bat/cmd】脚本开发
0. 开篇 bat/cmd 均是window操作系统下,两者都是通过文本方式编辑,创建以及查看.均是命令的集合.bat与cmd有什么区别呢 ? 1) cmd文件允许使用的命令比bat多,但是只有在wi ...
- 初学者必知的Python中优雅的用法 分类： Python 2015-05-11 15:02 782人阅读 评论(0) 收藏
本文由 伯乐在线 - 淘小米 翻译,Daetalus 校稿.未经许可,禁止转载!英文出处:freepythontips.wordpress.com.欢迎加入翻译小组. Hi 朋友们.由于我最近都比较忙 ...
- Windows下如何正确下载并安装可视化的Redis数据库管理工具（redis-desktop-manager)（图文详解）
不多说,直接上干货! Redis Desktop Manager是一个可视化的Redis数据库管理工具,使用非常简单. 官网下载:https://redisdesktop.com/down ...
- 数据库--oracle图形化管理工具和新增自定义用户
oracle数据库图形化管理工具: 1 navicat工具很小,操作mySQL和SQLServer非常好用,但对于oracle体验性就有点差,要自己下载编码和替换oci文件.下面是解决的方法教程链接 ...
- Hive文件存储格式和hive数据压缩
一.存储格式行存储和列存储 二.Hive文件存储格式 三.创建语句和压缩 一.存储格式行存储和列存储 行存储可以理解为一条记录存储一行,通过条件能够查询一整行数据. 列存储,以字段聚集存储,可以理解为 ...
- centos7-默认启动方式改变
在图形界面使用 ctrl+alt+F2切换到dos界面 dos界面 ctrl+alt+F2切换回图形界面 在命令上 输入 init 3 命令 切换到dos界面 输入 init 5命令 切换到图形界面 ...
- centos6.5 + 7 静态ip配置
2017/09/19日更, centos6.5 可用 DEVICE=eth0 TYPE=Ethernet ONBOOT=yes NM_CONTROLLED=yes BOOTPROTO=static D ...