【转】用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 实现短信验证
短信验证大家都已经非常熟悉了,基本上每天都在接触手机短信的验证码,比方某宝,某东购物.站点注冊,网上银行等等,都要验证我们的手机号码真实性.这样做有什么优点呢. 曾经咱们在做站点的时候.为了提高用户注 ...
随机推荐
- SQL Server 数据库存储过程实例
USE [UFDATA_999_2014] GO /****** Object: StoredProcedure [dbo].[p_XMonPerNums] Script Date: 06/12/20 ...
- Kubernetes使用GlusterFS实现数据持久化
k8s中部署有状态应用等需要持久化数据的应用,必不可少得用存储,k8s支持很多中存储方案,我司目前使用的存储有glusterfs(分为容器化和裸机方式).nfs供应用选用,本次就简单实战下gluste ...
- 弱网测试--使用fiddler进行弱网测试
弱网测试原理以及方法(一) 一.为什么要进行弱网测试? 按照移动特性,各种网络连接协议不同,导致通信的信号不同,速率也不同,影响应用的加载时间.可用性.稳定性 二.什么样的网络属于弱网? 低于2g速率 ...
- 解析xml文件步骤 -- pullparser
1. 初始化一个xml的解析器 XmlPullParser parser = Xml.newPullParser(); 2. 设置解析器的参数 InputStream inputStream = th ...
- Spark编程环境搭建（基于Intellij IDEA的Ultimate版本）（包含Java和Scala版的WordCount）（博主强烈推荐)
福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 Java全栈大联盟 ...
- 正则表达式最后的/i是不区分大小写的意思
eg: "/\/*install$/i" 正则表达式 代表什么意思 /表达式的内容/ ,php中的正则表达式都必须在 / / 内 \/是匹配"/" 号,*号 ...
- Innosetup(pascal)标签控件label换行
Label1.AutoSize := false; //先关闭自适应 Label1.WordWrap := true; //开启换行
- 在 mac 上利用 homebrew 安装软件
在mac经常需要安装一些软件,你可以通过app store下载,或者可以通过浏览袭搜索下载.这里介绍通过homebrew安装一些软件,它会自动为你下载一些软件的相关依赖,免去安装的烦恼. 首先我们需要 ...
- ubuntu新建用户不能使用ll等指令，显示出来的信息没有颜色区分的解决方案
ubuntu利用 useradd -m test -g admin 指令,创建用户test及其工作目录.但是登陆后,会出现不能使用很多指令“比如:ll.显示的信息没有颜色”等等此时 查看该用户的 ...
- [PY3]——面向对象编程（1）
类的对象 有三种对象 可以做什么操作 包括什么属性 类对象 属性引用.实例化 函数方法.内置的属性.类变量 实例对象 属性引用 函数方法.类变量.实例变量 方法对象 1. 类对象.实例对象.方法对象 ...