超实用的JavaScript代码段 Item4 --发送短信验证码

发送短信验证码

实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”、“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”。在倒计时期间按钮为禁用状态 .

第一步、获取按钮、绑定事件、设置定时器变量和计时变量

第二步、添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为“发送验证码”,否则显示为“X秒后重试”

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function(){
        var send=document.getElementById(‘send‘),
            times=60,
            timer=null;
        send.onclick=function(){
          // 计时开始
          var that = this;
            this.disabled=true;
            timer = setInterval(function(){
                times --;
                that.value = times + "秒后重试";
                if(times <= 0){
                    that.disabled =false;
                    that.value = "发送验证码";
                    clearInterval(timer);
                    times = 60;
                }
                //console.log(times);
            },1000);
        }
    }
    </script>
</head>
<body>
    <input type="button" id="send" value="发送验证码">
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
设置按钮是否为禁用时,send.disabled=true; send.disabled=false;
true和false不能加引号!true和false不能加引号!true和false不能加引号!否则值永远为真。
也可用send.setAttribute(‘disabled‘,‘disabled‘);
或send.removeAttribute(‘disabled‘);
  • 1
  • 2
  • 3
  • 4

转载:http://blog.csdn.net/i10630226/article/details/49531083

时间: 2024-10-16 22:09:31

超实用的JavaScript代码段 Item4 --发送短信验证码的相关文章

《超实用的JavaScript代码段》可以参加京东买200-100的促销了

#京东满200-100单# 图书放血大卖了,<超实用的JavaScript代码段>http://item.jd.com/11535623.html 参加京东满200减100的大促,就在6.1这一天,仅此一天,错过再等一年!!!!! 仅此一天,赶紧下单! 作者在群里随时给大家解决问题!!!

程序君带你畅聊发送短信验证码

现在不管是网站,还是app等互联网和移动互联网产品,绝大部分注册都是直接用手机号注册登录的,方式就是给手机发送短信验证码,然后把验证码填入,后台程序去匹配判断用户填入的验证码和发送的是否一致. 我最近做的好几个项目都用到了发送短信验证码的这个第三方接口,其实这个发送验证码的原理很简单,实现也很简单. 如下三个图,是我做的其中一个项目的相关效果截图: 我用的比较多的第三方短信接口是容联-云通讯的(http://www.yuntongxun.com/),它的API挺强大的,也挺稳定的,使用也不难,有

JAVA利用第三方平台发送短信验证码。

前段时间自己做的一个小项目中,涉及到用短信验证码登录.注册的问题,之前没涉及过这一块,看了别人的博客其实也是似懂非懂的,现在就将自己做的利用第三方短信平台来发送验证码这个功能记下来. 本文以注册为例,在SpringMVC+Spring+Mybatis框架的基础上完成该短信验证码功能. 发送短信验证码的原理是:随机生成一个6位数字,将该6位数字保存到session当中,客户端通过sessionid判断对应的session,用户输入的验证码再与session记录的验证码进行比较. 为了防止有广告嫌疑

阿里云短信服务发送短信验证码(JAVA开发此功能)

开发此功能需注册阿里云账号,并开通短信服务(免费开通) 充值后,不会影响业务的正常使用!(因为发送验证类短信:1-10万范围的短信是0.045元/条).开发测试使用,充2块钱测试足够了 可参考阿里云官方开发文档了解详情,文档中写的也是很详细了... https://help.aliyun.com/product/44282.html 代码编写之前需要准备几个东西 1,aliyun-java-sdk-core.jar ,  aliyun-java-sdk-dysmsapi.jar  这2个jar包

python利用第三方模块,发送短信验证码

对于初学者,如何利用第三方python开发包发送短信验证码,下面是具体的实现和记录过程! 环境:虚拟机上centos7平台,python3.7版本: 第三方短信平台:榛子云短信(smsow.zhenzikj.com) SDK下载地址: smsow.zhenzikj.com/sdkdownload- 注意要下载python3的 API文档: smsow.zhenzikj.com/doc/python_- 首先,申请账号的部分就省略了 1. 获得appid和appSecret 使用申请的账号,登录用

微信小程序发送短信验证码完整实例

微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class="container"> <view class='row'> <input placeholder='请输入姓名' bindinput='bindNameInput'/> </view> <view class='row'> <inpu

(生鲜项目)17. drf实现发送短信验证码功能

第一步; 前期分析 由于之前在设计model的时候, 我们已经决定对code进行数据库保存, 所以这里我们应该使用 mixins.CreateModelMixin 同时, 用户发过来的手机号码, 我们在后端应该执行自己的验证, 包括 手机号码是否被注册 手机号码是否合法  [在settings.py中加上 REGEX_MOBILE="^1[358]\d{9}$|^147\d{8}$|^176\d{8}$"] 两次验证码的间隔是否大于60秒 基于以上考虑, 我们需要创建一个 serial

使用阿里云短信服务发送短信验证码

阿里云短发服务使用流程: 1.在阿里云上完成短信服务的购买. 2.导入相关的jar包. <!-- 阿里云短信服务 --> <dependency> <groupId>com.aliyun</groupId> <artifactId>aliyun-java-sdk-core</artifactId> <version>4.1.0</version> </dependency> <!-- 阿里云短

各大APP注册时发送短信验证码是怎么实现的?

回答这个问题可以从多个角度来回答,比如商务角度和技术角度,为了快速清晰的让广大的读者了解这个过程,本文我们从商务角度来深入分析. 实现原理 现各大APP发送短信的服务一般是由第三方短信服务商提供的,他们整合了移动,联通.电信三方资源,三网都可以发送,这样就不需要直接对接运营商了. 发送短信验证码主要是为了验证手机方的真实性,实现原理简单说就是系统先生成一个验证码,调用第三方服务商的短信接口,发送到手机方,手机方输入验证码,再由系统去校验是否符合,符合则说明手机真实有效. 服务商选择 提供短信接入