原地址：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完成手机短信验证按键点击事件的更多相关文章

  1. 如何实现php手机短信验证功能

    http://www.qdexun.cn/jsp/news/shownews.do?method=GetqtnewsdetailAction&id=1677 下载php源代码 现在网站在建设网 ...

  2. ASP.NET MVC 手机短信验证

    本文来自于stoneniqiu的文章,原文地址 http://www.cnblogs.com/stoneniqiu/p/6234002.html 1.注册一个应用 得到AppKey 和 App Sec ...

  3. 完整的Android手机短信验证源码

    短信验证功能我分两个模块来说,短信验证码的后台和代码实现短信验证码的功能. 一.短信验证码的后台      1.注册Mob账号:http://www.mob.com/#/login 2.注册成功之后, ...

  4. 利用twilio进行手机短信验证

    首先要注册 twilio 账号但是由于twilio人机验证用的是Goole所有注册需要FQ 完成后去免费获取15元使用 然后 pip install twilio 注册完成后会在个人首页显示你的免费金 ...

  5. 第一次发博，发个简单的Java程序发送手机短信验证

    最近在准备一个项目,想的登录时候用手机验证,就通过上网查阅了一下手机验证的实现方法,原来超级简单,下面将一步一步介绍. 1.去中国网建注册一个账号密码,首次注册送五条免费短信和3条免费彩信.具体的网址 ...

  6. NodeJS 实现手机短信验证 模块阿里大于

    1,NodeJS 安装阿里大于模块 切换到项目目录使用npm 安装阿里于模块 npm i node-alidayu --save 2,aliyu官网使用淘宝账户登录 登录阿里大于 https://do ...

  7. js手机短信验证

    贴代码之前,我们先讲一下这里我们用到的技术主要有1个.setInterval(),这个方法可以实现倒计时的效果. css: .weui_btn_disabled.weui_btn_default { ...

  8. 融云发送手机短信验证短信（.net版本）

    首先本次需求是在MVC5中进行的,通过收费的融云服务来验证手机号码,而且本次的项目也是前后台分离,所以添加了WEBAPI2,那么先添加WEBAPI的接口 using System; using Sys ...

  9. ASP.NET MVC+Bootstrap 实现短信验证

    短信验证大家都已经非常熟悉了,基本上每天都在接触手机短信的验证码,比方某宝,某东购物.站点注冊,网上银行等等,都要验证我们的手机号码真实性.这样做有什么优点呢. 曾经咱们在做站点的时候.为了提高用户注 ...

随机推荐

  1. HTTP协议及WWW服务应用

    一.用户访问网站的流程图 二.DNS解析的流程图 三.用户访问网站的基本流程原理阐述 ① 用户在浏览器中输入请求的地址回车 ② 先找本地的缓存和Hosts文件,有解析的对应IP直接返回个客户端IP地址 ...

  2. [原创] rtrim() 格式化中文问题

    先看以下代码 var_dump(rtrim("互联网产品.", ".")); 我们以为会得到结果 "互联网产品", 但实际上获得的是 &qu ...

  3. 【.NET 4.5】新增的 Prefer 32-bit target platform

    这本来是一个很小的feature并且也没有什么模糊的地方,关键是VS把这个设置成了默认值,当默认为Any CPU的时候,application会被编译成32-bit mode. 下边是我遇到的问题,在 ...

  4. jQuery中的100个技巧（译）

    1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. <sc ...

  5. 线性表 （单链表、循环链表-python实现）

    一.线性表 线性表的定义: 线性表是具有相同数据类型的有限数据的序列. 线性表的特点: 出了第一个元素外,每个元素有且仅有一个直接前驱,除最后一个元素外有且只有一个后继. 线性表是一种逻辑结构,表示元 ...

  6. 【Java并发编程】：深入Java内存模型—内存操作规则总结

    主内存与工作内存 java内存模型的主要目标是定义程序中各个变量的访问规则,即在虚拟机中将变量存储到内存和从内存中取出变量这样的底层细节.此处的变量主要是指共享变量,存在竞争问题的变量.Java内存模 ...

  7. Postman—前置请求脚本

    前言 在前面的文章中已经说到了,在Postman中可以编写以下两种脚本: 前置请求脚本 测试脚本 这两种脚本的运行时机都不一样,在上一篇<Postman—脚本介绍>中已经详细的进行了介绍. ...

  8. 容器挂载volume出现“Permission denied”的问题定位解决

    使用如下系统(centos)运行容器后,在容器内的挂载目录内执行ls命令出现了“Permission denied”的错误 Linux localhost.localdomain 3.10.0-862 ...

  9. Go 开发

    0.参数传递永远是值传递,地址也是一种值 1.go 开发环境的配置 2.import 包的几种形式: 1)_,默认导入一个包时,会将包中内容导入再执行包中的init()方法,有时并不需要某个包,只是想 ...

  10. elasticsearch分析系列

    http://www.opscoder.info/category/ElasticSearch/?page=2 https://www.jianshu.com/p/0908b9ee65fc https ...